I am currently studying React router v1.0, and I am confused with passing state to child components as properties.
App.js
getInitialState: function(){
return {
status: 'disconnected',
title: ''
},
...
,
render: function(){
return (
<div>
<Header title={this.state.title} status={this.state.status}/>
{React.cloneElement(this.props.children,{title:this.state.title,status:this.state.status})}
</div>
);
Client.js
var routes = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Audience} />
<Route path ="speaker" component={Speaker} />
</Route>
</Router>
);
Audience.js
render: function(){
return(
<div>
<h1>Audience</h1>
{this.props.title || "Welcome Audience"}
</div>
);
}
Speaker.js
render: function(){
return(
<div>
<h1>Speaker:</h1>
{this.props.status || "Welcome Speaker!"}
</div>
);
}
Instead of this:
{React.cloneElement(this.props.children,{title:this.state.title,status:this.state.status})}
Is there something similar for React.cloneElement using the https://facebook.imtqy.com/react/docs/jsx-spread.html statement :
<RouteHandler {...this.state}/>
TL; DR; Basically, I would like to convey all the state to my route components instead of their individual definition.
Any help would be greatly appreciated!
source
share