javascript - 如何将道具传递给{this.props.children}

我正试图找到适当的方法来定义一些可以用一般方法使用的组件:

<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}定义包装组件时,如何将一些属性传递给它的所有子级?


最佳答案:

可以使用React.Children迭代子元素,然后使用React.cloneElement使用新的props(浅合并)克隆每个元素,例如:

const Child = ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}>Click Me</div>
);

class Parent extends React.PureComponent {
  doSomething = (value) => {
    console.log('doSomething called by child with value:', value);
  }

  render() {
    const childrenWithProps = React.Children.map(this.props.children, child =>
      React.cloneElement(child, { doSomething: this.doSomething })
    );

    return <div>{childrenWithProps}</div>
  }
};

ReactDOM.render(
  <Parent>
    <Child value="1" />
    <Child value="2" />
  </Parent>,
  document.getElementById('container')
);

小提琴:https://jsfiddle.net/2q294y43/2/
您还可以将道具传递给render props的儿童。

评论