在cloneElement中反应JSX Spread属性

Question

我正在学习React并被卡住。 也许有人可以帮忙。 我有以下代码：

反应路由器

ReactDOM.render(

   <Router> 
       <Route path="/" component={App}>
           <Route path="something" component={Something} />
       </Route>
   </Router>

,document.getElementById('react-container')
);

应用程式

var App = React.createClass({

getInitialState: function() {
    return {
        status: 'ready',
        title: 'The Title'
    }
},

render: function() {

    var childComp = null;

    if(this.props.children) {

            /*
                This will work 
                childComp = React.cloneElement(this.props.children, {title: this.state.title, status: this.state.status});
            */

            /*this wont*/
            childComp = React.cloneElement(this.props.children, {...this.state});
    }

    return (
        <div>
            <Header title={this.state.title} />
            {childComp}
        </div>
    );
}
});

东西：

var Something = React.createClass({
render: function() {
    return (
        <div>
            <h1>Something</h1>
            <h2>{this.props.title}</h2>
            <h3>{this.props.status}</h3>
        </div>
    );
}
});  

问题在于App可以具有许多状态。 我不想像这样手动编写它们：

React.cloneElement(this.props.children, {title: this.state.title, status: this.state.status})

但是使用JSX传播属性将无法工作（syntaxerror）

Answer 1

React.cloneElement(this.props.children, this.state)应该可以工作。