将 Props 传递给 this.props.children

Question

我是 React 新手，在将自定义道具传递给 this.props.children 时遇到问题。我已经尝试过React.cloneElement，当我在创建它的类中执行 console.log 时可以看到该道具，但是当我尝试通过它时它会丢失。我不知道React-Router-Dom 是否正在做某事导致道具无法通过。任何帮助将不胜感激。

我使用来自 GitHub 的 Create-React-App 开始了这个项目。我安装了以下软件。

"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"redux": "^3.7.2",

在 App.js 中

render() {
 return (
  <Provider store={store}>
    <BrowserRouter> 
    <Switch>
      <Route exact path="/" component={LoginPage} />
      <Route path="/Login" component={LoginPage} />
      <RootPage>
        <Route path="/TestPage" component={testPage} />
      </RootPage> 
    </Switch>
   </BrowserRouter>
  </Provider>
 );
}

在 RootPage.js（父）中

render() {
    const { classes, theme, children } = this.props;

    var childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { doSomething: "Test String" }));

    console.log(childrenWithProps)
    return (
        <div>
           {childrenWithProps}
        </div>
    );
}

在RootPage.js 中使用上面的console.log，我可以看到道具“doSomething”。

在 TestPage.js（子）中

render(){
    const { classes, theme } = this.props;

    console.log(this.props)

    return (
        <div> 
        </div>
    );
}

在上面的 console.log 在 TestPage.js 中我没有看到我通过的“doSomething”道具。

感谢您的帮助。

Answer 1

将props 从Route 组件传播到TestPage 组件。

<RootPage>
  <Route path="/TestPage" render={props => <TestPage {...props} /> }/>
</RootPage>