如何将道具传递给{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> &nbsp;&nbsp;&nbsp;&nbsp;{React.cloneElement(this.props.children,&nbsp;{&nbsp;loggedIn:&nbsp;this.state.loggedIn&nbsp;})}</div>注只有在只有一个孩子并且是一个有效的反应元素的情况下，这才能起作用。

Answer 2

尝尝这个<div>{React.cloneElement(this.props.children,&nbsp;{...this.props})}</div>我用的是反应-15.1。