当我使用路线时，为什么我的道具未定义？

Question

将道具重新传递给儿童时（特别是在Route的内部时），我很困惑。例如：

class App extends Component { 
    constructor(props) { 
     this.sayHi = this.sayHi.bind(this); 
    } 

    sayHi() { 
     console.log('hi') 
    } 

    render() { 
     return (
      <Router> 
      <Route path="/projects" component={(props, state, params) => 
       <ProjectList 
       sayHi={this.sayHi} 
       {...props} />} 
      /> 
      </Router> 
     ) 
    } 
} 

const ProjectList = (props) => { 
    return (
     <Route path={`${props.match.url}/:id`} component={(props, state, params) => 
      <ProjectDetail 
      sayHi={props.sayHi} 
      {...props} />} 
     /> 
    ) 
} 

const ProjectDetail = (props) => { 
    console.log(props) 
} 

内ProjectList成分，我没有问题，访问sayHi方法（我可以将它连接到这个组件内的onClick事件），但在ProjectDetail组件，我得到一个未定义的props.sayHi。

我怎么不正确地传递这个道具？

Answer 1

你只是与同名的参数有问题。在您的ProjectList组件：

<Route path={`${props.match.url}/:id`} component={(props, state, params) => 
    <ProjectDetail 
     sayHi={props.sayHi} 
    {...props} />} 
/> 

当您创建一个ProjectDetail元素并通过sayHi道具，你必须访问ProjectList的道具，箭头功能不是道具（道具Route passes）。参数相互“覆盖”，因为它们的名称相同，props。因此，尝试：

const ProjectList = (props) => { 
    return (
     <Route path={`${props.match.url}/:id`} component={(routeProps, state, params) => // use name "routeProps" instead of "props" 
      <ProjectDetail 
       sayHi={props.sayHi} 
      {...props} />} 
     /> 
    ) 
} 

我们在component道具的箭头功能routeProps将摆脱名称冲突的命名props。这样，ProjectList的道具传递给ProjectDetail，而不是Route通过的道具。