ReactRouter的组件通信问题？

Question

路由是这样的

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={AppIndex} />
  </Route>
</Router>

App代码是这样的

const App = React.createClass({
  getInitialState: function() {
    return {id: null};  
  },
  componentDidMount: function() {
    $.get("api", function(data) {
      if (this.isMounted()) this.setState(data);
    }.bind(this));
  },
  render: function() {
    // 这个是想了好久想到的通过App给AppIndex组件传递数据的方式
    this.props.children.props.id = this.state.id;
    console.log("render App");
    return (
      <div>
        // ....
        {this.props.children}
      </div>
    );
  },
});

然后AppIndex是这样的

const AppIndex = React.createClass({
  render: function() {
    console.log("render AppIndex");
    console.log(this.props.id);
    return <div>{this.props.id || "NULL"}</div>;
  },
});

这样子运行之后，控制台的输出为

render App
render AppIndex
null
render App

页面中AppIndex显示的是NULL，除非点击AppIndex的路由导致AppIndex的render才会正确显示id属性。

到底这个App和AppIndex应该怎么样通信？或者如何在App重新渲染的时候自动重新渲染AppIndex哪怕路由没有改变？

Answer 1

{this.props.children && React.cloneElement(this.props.children, {
    id: this.state.id
})}

id传递至子组件props中。

Answer 2

好几处问题，这和 route 没关系

1. 那四和输出，前两应该你也理解了，第三行肯定输出 null 啊，state.id 初始化是本来就是 null，你用$.get 异步赋值前 AppIndex 早就 render 了，这时候肯定是 null 啊；

2. $.get 异步给 state 赋值，此时App会 render，所以会有第四行的输出；

3. this.props.children.props.id = this.state.id; 不建议这样传值，props 规范是只读，实际这样做也是错的；

4. 你那个$.get 获取的数据只是在 AppIndex 里用，为什么不放在 AppIndex 里呢？

你先看看 reactjs 好的例子，理解一下思路。