javascript - 当我使用 Route 时，为什么我的 props 未定义？

Question

在将 props 重新传递给 child 时(特别是在 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。

我如何错误地传递了这个 Prop ？

Answer 1

您只是遇到了同名参数的问题。在您的 ProjectList 组件中:

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

当您创建 ProjectDetail 元素并传递 sayHi 属性时，您必须访问ProjectList 的属性，而不是箭头函数的 Prop ( Prop 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 属性的箭头函数中的 props 重命名为 routeProps 这将消除名称冲突。这样，ProjectList 的 props 就会传递给 ProjectDetail，而不是 Route 传递的 props。