为什么在使用 Route 时我的 props 未定义？

Question

将道具重新传递给孩子时（尤其是在 a 中时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组件中，我得到了一个 undefined for props.sayHi.

我怎么错误地传递了这个道具？

Answer 1

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

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

当您创建ProjectDetail元素并传递sayHi道具时，您必须访问ProjectList的道具，而不是箭头函数的道具（道具Route传递）。参数相互“覆盖”，因为它们具有相同的名称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} />} 
        />
    )
}

我们将道具的箭头函数props中的重命名为将摆脱名称冲突。这样，传递给的道具，而不是传递的道具。componentroutePropsProjectListProjectDetailRoute