Question

以前在react-router v3。*我通过

将道具传递给子组件

React.cloneElement(this.props.children, this.props)

如何在react-router v4中使用新的<Match /> API

完成此操作

到目前为止，我提出的解决方案是在render API中使用<Match />方法：

<Match pattern="/" render={() => <ChildComponent {...this.props} />} />

使用ES6 spread语法将props传递给Child Component。是否有更好的方法可以将所有标准道具（位置，模式，路径名，isExact）带到子组件中？

Answer 1

根据the render code of v4.0.0-alpha5判断，您有以下两种选择：

<Match pattern="/" render={props => <ChildComponent {...props} {...this.props} />} />
<Match pattern="/">{({matched, ...props}) => {
    return matched ? <ChildComponent {...props} {...this.props} /> : null;
}}</Match>

另见Match API documentation.

使用react-router v4将道具传递给子组件

1 个答案: