What I'm wanting to do is have children components influence children components of its parent. Tangibly: I want my content components to be able to inject components into my header and sidebar elements that are pre-defined.
Router:
<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>
App Root:
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>
);
}
}
Home:
class Home extends Component {
render() {
return (<strong>Home</strong>);
}
}
My navigation and header are defined inside AppRoot, but I'm not sure how to have Home set the AppRoot.header_elements value. Is there a simpler way of doing this, or is what I want impossible?
The way you do this is to have a property of type func on your child component -
Home.propTypes = {
updateRoot : React.PropTypes.func
};
And then call that from home. Ofcouse, you would need to wire it up in the router
<Route path="home" component={() => <Home updateRoot={this.handleUpdateRoot}/>}/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.