javascript - 如何将道具传递给{this.props.children}(How to pass props to {this.props.children})

Question

I'm trying to find the proper way to define some components which could be used in a generic way:

(我试图找到定义可以以一般方式使用的某些组件的正确方法：)

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

There is a logic going on for rendering between parent and children components of course, you can imagine <select> and <option> as an example of this logic.

(当然，在父组件和子组件之间存在渲染逻辑，您可以想象<select>和<option>作为此逻辑的示例。)

This is a dummy implementation for the purpose of the question:

(对于这个问题，这是一个虚拟的实现：)

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

The question is whenever you use {this.props.children} to define a wrapper component, how do you pass down some property to all its children?

(问题是，每当您使用{this.props.children}定义包装器组件时，如何将某些属性传递给其所有子级？)

  ask by plus- translate from so

Answer 1

Cloning children with new props

(用新道具克隆儿童)

You can use React.Children to iterate over the children, and then clone each element with new props (shallow merged) using React.cloneElement eg:

(您可以使用React.Children遍历子级，然后使用React.cloneElement使用新的道具（浅合并）克隆每个元素，例如：)

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

Fiddle: https://jsfiddle.net/2q294y43/2/

(小提琴： https : //jsfiddle.net/2q294y43/2/)

Calling children as a function

(称呼孩子为功能)

You can also pass props to children with render props .

(您也可以将道具传递给带有渲染道具的孩子。)

In this approach the children (which can be children or any other prop name) is a function which can accept any arguments you want to pass and returns the children:

(在这种方法中，子代（可以是children或任何其他道具名称）是一个函数，可以接受您要传递的任何参数并返回子代：)

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() {
    return <div>{this.props.children(this.doSomething)}</div>
  }
};

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

Instead of <React.Fragment> or simply <> you can also return an array if you prefer.

(除了<React.Fragment>或简单地<>您还可以根据需要返回一个数组。)

Fiddle: https://jsfiddle.net/ferahl/y5pcua68/7/

(小提琴： https : //jsfiddle.net/ferahl/y5pcua68/7/)