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

У меня есть (например) два компонента в React. Первый, 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 На данный момент это ошибки, и я знаю, почему (this не включает 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>
        )
    }
}

Ответ 1

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

Однако, поскольку вы используете React Router нему можно получить доступ несколько иначе: this.props.route.param вместо default 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>; 
})}

Ответ 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 в Child Component:

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

Ответ 3

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

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

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

this.props.docs

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