怎样将props传递给{this.props.children}

在ReactJs中this.props.children是一个特殊的存在,它表示组件的所有节点。

this.props.children的值存在三种可能性:

  • 如果当前组件没有子节点,this.props.children为undefined;
  • 如果当前组件只有一个子节点,this.props.children为object;
  • 如果当前组件有多个子节点,this.props.children就为array。

那么,如下代码:

const Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

我们要怎么样将doSomething传递给{this.props.children}呢?也就是怎么样在父组件中对不确定的子组件进行props传递呢?

React提供的React.Children给了我们很方便的操作。其中:

React.cloneElement的作用是克隆并返回一个新的 ReactElement (内部子元素也会跟着克隆),新返回的元素会保留有旧元素的 props、ref、key,也会集成新的 props(只要在第二个参数中有定义)。

React.Children.map来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object

那么,上面的代码就可以改为:

const Parent = React.createClass({
  doSomething: function(value) {
    console.log('doSomething called by child with value:', value);
  },
  render: function() {
    const childrenWithProps = React.Children.map(this.props.children,
      (child) => React.cloneElement(child, { doSomething: this.doSomething }));
    return <div>{childrenWithProps}</div>
  }
});

然后,我们直接在子对象中用this.props.doSomething()进行调用就可以了。

参考: