Reactjs 分裂转换反应

我想做的是让子组件影响其父组件的子组件。有形：我希望我的内容组件能够将组件注入到预定义的标题和边栏元素中

路由器：

<Router history={browserHistory}>
  <Route path="/" component={AppRoot}>
    <Route path="/home" component={Home}/>
    <Route path="/list" component={List}/>
    <Route path="/profile/:uid" component={Profile}/>
  </Route>
</Router>

应用程序根目录：

class AppRoot extends Component {
  constructor() {
    super();
    this.state = {
      header_elements: <div>HELLO???</div>
    };
    console.log(this);
  }
  render() {
    return (
        <div>
          <AppBar className="app_bar" title="Soulhart" showMenuIconButton={false}>
            <div id="nested_content">
              {this.state.header_elements}
            </div>
          </AppBar>
          <div>
            {this.props.children}
          </div>
        </div>
    );
  }
}

class AppRoot扩展组件{
构造函数（）{
超级（）；
此.state={
标题元素：您好？？？
};
console.log（this）；
}
render（）{
返回(
{this.state.header_elements}
{this.props.children}
);
}
}

主页：

class Home扩展组件{
render（）{
返回（主页）；
}
}

---

我的导航和标题是在Approt中定义的，但我不确定如何让Home设置approt.header\u元素值。有没有一种更简单的方法可以做到这一点，或者我想要的是不可能的？

这样做的方法是在子组件上有一个func类型的属性-

Home.propTypes = {
    updateRoot : React.PropTypes.func
};

然后在家里打电话。当然，你需要把它连接到路由器上

 <Route path="home" component={() => <Home updateRoot={this.handleUpdateRoot}/>}/>

}/>

阅读此答案，然后定义一个设置应用程序状态的方法，并将该方法传递给您的子组件谢谢，这很有效。：）这会导致一个错误，

此

未定义。

 <Route path="home" component={() => <Home updateRoot={this.handleUpdateRoot}/>}/>