Передать реквизит this.props.children

Question

Я новичок в React, и у меня возникла проблема с передачей пользовательских реквизитов на this.props.children. Я пробовал React.cloneElement и вижу пропеллер, когда я создаю файл console.log в классе, в котором я его создал, но он теряется, когда я пытаюсь его пропустить. Я не знаю, может быть, React-Router-Dom что-то делает, чтобы пропеллер не прошел. любая помощь будет принята с благодарностью.

Я начал этот проект, используя Create-React-App из GitHub. У меня установлено следующее программное обеспечение.

"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>
    );
}

С console.log выше в RootPage.js я могу видеть опору "doSomething".

в TestPage.js (Child)

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

    console.log(this.props)

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

в приведенном выше console.log в TestPage.js я не вижу пропуска "doSomething", который я прошел.

Спасибо за любую помощь.

Answer 1

Распределить props в TestPage компонент из Route компонента.

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