React JS. Как получить параметр из вложенного роута?

Question

[IDDH]

Есть react-router (react-router 2.*):

<Router  history={hashHistory}>
    <Route path="/" component={App}>
        <Route path="list/:id" component={List} />
        <Route path="another/:id" component={Another} />
    </Route>
</Router>

Как получить в компоненте {App} свойство :id вложенного роута {List}?
И как я могу различить компоненты {List} и {Another} в {App}?

В компоненте {App} рендер происходит след. образом:

<div className="wrapper">
    <MenuList />
    {this.props.children}
</div>

Смысл заключается в следующем:

Мне необходимо произвести какие-то действия с id в MenuList, например, установить активное состояние пункта.

Как это сделать наиболее правильно и в стиле React'а?

Спасибо!

Answer 1

[Roman_Kh]

Добавьте в компонент List функцию getId(), которая будет возвращать this.props.params.id
А в App можно добавить функцию, которая будет возвращать все id всех children'ов.
Ссылку на функцию можно передать в качестве параметра при создании компонента MenuList
<MenuList getId={this.getAllIds} />
А MenuList будет вызывать ее при отрисовке и разбирать, какие пункты сделать активными, а какие нет.

Как вариант, можно сделать store (см. Flux), который будет содержать данные об отображенных компонентах. И тогда все (App, MenuList, List) будут общаться только с этим store.

Comments

[IDDH]

Вашу идею понял, думаю конечно же лучше использовать второй Ваш вариант со store. Еще бы хотелось узнать как различить какой компонент в данный момент выбран {List} или {Another}?

[vilix]

IDDH насчет какой компонент выбран смотрите поля и методы того же children console.log(this.props.children)

Answer 2

[vilix]

если я правильно понял часть вашего вопроса, в App получить :id дочерних компонентов можно так:

if (this.props.children)
      console.log(this.props.children.props.params.id);

т.е например вы перешли по ссылке /list/11 тогда код выше выведет "11"

Comments

[IDDH]

Спасибо, да, так тоже работает.