Доступ к родительскому состоянию у ребенка в реакторе

Question

У меня есть (например) два компонента в реактиве. Первый, app.js, является корневым компонентом. Он импортирует некоторые данные JSON и помещает их в свой state. Это прекрасно работает (я вижу это в React devtools).

import data from '../data/docs.json'; 

class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     docs: {} 
    }; 
    } 
    componentWillMount() { 
    this.setState({ 
     docs: data 
    }); 
    } 
    render() { 
    return (
     <Router history={hashHistory}> 
     <Route path="/" component={Wrapper}> 
      <IndexRoute component={Home} /> 
      <Route path="/home" component={Home} /> 
      <Route path="/docs" component={Docs} /> 
     </Route> 
     </Router> 
    ); 
    } 
} 

Во-вторых, docs.js, предназначается, чтобы показать это JSON данные. Для этого ему необходимо получить доступ к state от app.js. На данный момент это ошибки, и я знаю, почему (не включает app.js). Но как же я могу передать state от app.js до docs.js?

class Docs extends React.Component { 
    render() { 
     return(
      <div> 
       {this.state.docs.map(function(study, key) { 
        return <p>Random text here</p>; 
       })} 
      </div> 
     ) 
    } 
} 

Answer 1

Правильный способ сделать это было бы, передавая состояние как props к Docs компоненте.

Однако, поскольку вы используете React Router может быть доступна в чуток по-другому: this.props.route.param вместо дефолта this.props.param

Так что ваш код должен выглядеть примерно так:

<Route path="/docs" component={Docs} docs={this.state.docs} /> 

и

{this.props.route.docs.map(function(study, key) { 
    return <p>Random text here</p>; 
})} 

Answer 2

Другой способ сделать это:

<Route path="/docs" component={() => <Docs docs={this.state.docs}/>}> 

Если вам нужно передать ребенок:

<Route path="/" component={(props) => <Docs docs={this.state.docs}>{props.children}</Docs>}> 

Если вы делаете это так, то вы можете получить доступ к реквизиту значения непосредственно this.props.docs в дочерних компонентах:

{ 
    this.props.docs.map((study, key)=> { 
     return <p key={key}>Random text here</p>; 
    }) 
} 

Answer 3

Другим способом от этого будет

 <Route path='/' render={ routeProps => <Home 
      {...routeProps} 
      docs={this.state.docs} 
      /> 
      } 
     /> 

В то время как в ребенок может получить доступ к docs с использованием

this.props.docs 

Надеюсь, это поможет!