如何将道具传递给{this.pros.child}

Question

如何将道具传递给{this.pros.child}我试图找到正确的方法来定义一些可以通用方式使用的组件：<Parent>   <Child value="1">   <Child value="2"></Parent>当然，在父组件和子组件之间呈现的逻辑是可以想象的。<select>和<option>作为这个逻辑的一个例子。为本问题的目的，这是一个虚拟的实施：var Parent = React.createClass({   doSomething: function(value) {   },   render: function() {     return (<div>{this.props.children}</div>);   }});var Child = React.createClass({   onClick: function() {     this.props.doSomething(this.props.value); // doSomething is undefined   },   render: function() {     return (<div onClick={this.onClick}></div>);   }});问题是当你使用{this.props.children}若要定义包装器组件，如何将某些属性传递给所有其子组件？

Answer 1

要想获得一种稍微更干净的方法，请尝试：

<div>
    {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}</div>

注只有在只有一个孩子并且是一个有效的反应元素的情况下，这才能起作用。

Answer 2

尝尝这个

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

我用的是反应-15.1。