在 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>
    );
}
});

问题是应用程序可以有很多很多状态。我不想像这样手动编写它们：

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

但是使用 JSX 传播属性将不起作用（语法错误）

Answer 1

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

在 cloneElement 中反应 JSX Spread 属性

React JSX Spread Attribute in cloneElement

reactjs

react-jsx