将道具传递给this.props.children

Question

我是React的新手，在将自定义道具传递给this.props.children 。 我已经尝试过React.cloneElement ，当我在创建它的类中执行console.log时可以看到道具，但是当我尝试React.cloneElement它时它就会丢失。 我不知道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>
    );
}

在上述TestPage.js中的console.log中，我看不到我通过的“ doSomething”道具。

感谢您的任何帮助。

Answer 1

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

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