拆分包含反應

Question

我想要做的是讓子級組件影響其父級的子級組件。 切實地：我希望內容組件能夠將組件注入到預定義的標題和側邊欄元素中。

路由器：

<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 Home extends Component {
  render() {
    return (<strong>Home</strong>);
  }
}

我的導航和標題是在AppRoot中定義的，但是我不確定如何通過Home設置AppRoot.header_elements值。 有沒有更簡單的方法可以做到這一點，或者我想要的是不可能的嗎？

Answer 1

執行此操作的方法是在子組件上具有func類型的屬性-

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

然后從家里打電話給他。 當然，您需要將其連接到路由器中

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