Question

我正在学习React并陷入困境。也许有人可以帮忙。我有以下代码：

阵营路由器

service rpcbind start
mount -a

应用

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

问题是App可以有很多州。我不想像这样手动编写它们：

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

但是使用JSX传播属性不会工作（syntaxerror）

Answer 1

React.cloneElement(this.props.children, this.state)应该有用。

在cloneElement中反应JSX Spread属性

1 个答案: