React 的 props.children

props.children 简介

 

在典型的React数据流模型中，props 是组件对外的接口。props 作为父子组件沟通的桥梁，为组件的通信和传值提供了重要手段。

this.props 对象的属性与组件的属性一一对应，但其中有一个比较特殊的参数：this.props.children。它表示组件所有的子节点。

在组件内部使用 this.props.children，可以拿到用户在组件里面放置的内容。

如下例，一个 span 标签在 Parent 中作为Child的子节点传入，可在 Child 中通过 this.props.children 取到：

class Parent extends React.Component {
  render() {
    return (
    <Child>
        <span>{'child node'}</span>
      </Child>
    );
  }
}

 

class Child extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

 

数据类型与检查

 

数据类型

 

this.props.children 的值有三种可能：

 

• 如果当前组件没有子节点，它就是 undefined；

• 如果有一个子节点，数据类型是 object；

• 如果有多个子节点，数据类型就是 array。

 

PropTypes 类型检查

 

既然 props.children 属于props中的一个属性，自然可以使用 PropTypes 进行类型检查。
但是，如上所述，根据传入情况的不同，props.children 的数据类型也不同，因此使用 PropTypes 对props.children 进行类型检查时，要注意依照实际情况进行设置。

使用 PropTypes.element ，可以指定仅将单一子元素传递给组件，作为子节点。

 

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

 

不确定 props.children 会被传入一个还是多个子节点时，可以使用 PropTypes.node 类型，代表任何可被渲染的元素（包括数字、字符串、元素或数组）。

MyComponent.propTypes = {
  children: PropTypes.node
};

 

插槽

 

props.children 可以实现类似 Vue 中的插槽功能。

当传入多个子节点时，props.children 是一个存放子节点的数组，可以通过下标访问到子节点，并控制其出现的位置：

 

class Parent extends React.Component {
  render() {
    return (
      <Child>
        <div>slot1</div>
        <div>slot2</div>
        <div>slot3</div>
      </Child>
    )
  }
}

 

class Child extends React.Component {
 render() {
   return (
    <div>
      <div>{this.props.children[2]}</div>
      <div>{this.props.children[1]}</div>
      <div>{this.props.children[0]}</div>
    </div>
  )
 }
}

 

注意：如果传入的 props.children 是一个字符串，通过下标访问只会访问到该字符串中的每个字符。

React.Children 方法

 

React 提供了工具方法 React.Children 来处理 this.props.children。

1. React.Children.map

 

object React.Children.map(object children, function fn)

遍历 props.children ，在每一个子节点上调用 fn 函数。

2. React.Children.forEach

 

React.Children.forEach(object children, function fn)

类似于 React.Children.map()，但是不返回对象。

3. React.Children.count

number React.Children.count(object children)

返回 children 当中的组件总数。

4. React.Children.only

object React.Children.only(object children)

返回 children 中仅有的子节点。如果在 props.children 传入多个子节点，将会抛出异常。