如何在使用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> 
)