Блог

У меня есть модель маршрута, созданная в react-router. Я хочу знать, как передавать реквизиты между моими компонентами в этой настройке — возможно ли это?

    <Route path='/' component={Layout}>
      <IndexRoute component={Home} />
      <Route path='/users' component={Users} />
      <Route path='/posts' component={Posts} />
      <Route path='/albums' component={Albums} />
      <Route path='/about' component={About} />
   </Route>
  

Скажем, например, я инициализирую свое состояние в компоненте макета (идея заключается в том, что все его дочерние элементы могут получить доступ к состоянию); как бы я передал им значение состояния, а также запустил функции в родительском компоненте, передаваемые через props?

Возможно ли это, как это было бы, если бы компонент был непосредственно вложен в его родительский элемент, или я неправильно думаю об этом в отношении маршрутизации? Если да, есть ли альтернативное решение?

Любая помощь приветствуется

Да, это возможно. Вы можете использовать контекст в Layout компоненте. Вот пример в ES6:

 export default class Layout extends React.Component {

    static childContextTypes = {
        layoutState: React.PropTypes.object
    }

    getChildContext() {
        return {layoutState: this.state};
    }

}
  

Затем просто объявите контекст в дочерних / дочерних компонентах:

 export default class Users extends React.Component {

    static contextTypes = {
        layoutState: React.PropTypes.object
    }

    render() {
        const {layoutState} = this.context;
        // then just use your layoutState and return
    }
}