如何在使用react-router时将道具传递给'this.props.children'？

Question

我在App组件中有一个'isLoggedIn'状态。

现在，我想将这个状态作为道具传递给子组件'Secret Component'。

<BrowserRouter> 
    <App> 
     <Switch> 
      <Route path='/secret' component={Secret} /> 
      <Route path='/' component={Top} /> 
     </Switch> 
    </App> 

</BrowserRouter> 

但是，我使用的反应路由器（ver4.1）这样并不能弄清楚如何应用程序组件的状态传递作为道具为其子组件。

const childrenWithProps = React.Children.map(this.props.children, (child) => { 
      console.log(child); 
      } 
     ); 

我知道，做这样的，我可以得到一个访问this.props.children和设置其他道具给他们，但因为我总结我的部件与路由器组件，应用程序组件的孩子现在是路线组件，这使得它很复杂...

任何人都可以请告诉我该怎么做？

我也担心如果我在如何使用react-router时做错了。

谢谢！

index.js（入口点）

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

import App from './components/App'; 
import Secret from './components/Secret'; 
import Top from './components/Top'; 

ReactDOM.render(
    <BrowserRouter> 
     <App> 
      <Switch> 
       <Route path='/secret' component={Secret} /> 
       <Route path='/' component={Top} /> 
      </Switch> 
     </App> 

    </BrowserRouter> 
    , 
    document.querySelector('.container') 
); 

App.js

import React, { Component } from 'react'; 

import NavigationMenu from './NavigationMenu'; 

export default class App extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      isLoggedIn: false 
     }; 
     this.toggleAuthenticationStatus = this.toggleAuthenticationStatus.bind(this); 
    } 


    toggleAuthenticationStatus() { 
     this.setState({ 
      isLoggedIn: !this.state.isLoggedIn 
     }); 
    } 


    render() { 

     //I want to pass this.state.isLoggedIn as props to Secret Component!!! 

     const childrenWithProps = React.Children.map(this.props.children, (child) => { 
      console.log(child); 
      } 
     ); 

     return (
      <div> 
       <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} /> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

Secret.js

import React, { Component } from 'react'; 

class Secret extends Component { 

    constructor(props) { 
     super(props); 
    } 


    componentWillMount() { 
     if (this.props.isLoggedIn === false) { 
      this.props.history.push('/'); 
     } 
    } 

    componentWillUpdate() { 
     if (this.props.isLoggedIn === false) { 
      this.props.history.push('/'); 
     } 
    } 

    render() { 
     return (
      <div> 
       This content is only for our members! 
      </div> 
     ) 
    } 
} 

export default Secret; 

Answer 1

在反应路由器V4推荐的方法是把嵌套内部路由父组件而不是将它们作为子组件传递（请参阅the basic example of react-router v4）。所以在你的情况下，我建议你简单地用路由替换{this.props.children}与开关组件，并停止传递他们作为应用程序的孩子。然后你可以像往常一样使用Route的render方法将道具传递给Secret组件。

return (
    <div> 
    <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} /> 
    <Switch> 
     <Route path='/secret' render={() => <Secret isLoggedIn={this.state.isLoggedIn}/>)} /> 
     <Route path='/' component={Top} /> 
    </Switch> 
    </div> 
)