React.Children及React.cloneElement

251 阅读1分钟

1 . React.Children

React.Children 顶层API之一,为处理this.props.children这个封闭的数据结构提供了有用的工具,它是react提供的一个工具方法。

this.props.children,它表示组件的所有子节点。

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

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

  • 如果有一个子节点,数据类型是 object。

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

React.children有5个方法

  • React.Children.map()
  • React.Children.forEach()
  • React.Children.count()
  • React.Children.only()
  • React.Children.toArray()

1 . 1 React.Children.map():

Object React.Children.map(object children,function fn [, object context])

第一参数是children。第二个参数是fucntion,function的参数第一个是遍历的每一项,第二个是对应的索引。

0960.png

2 . React.cloneElement

克隆 react 节点,并合并props, 和children。

React.cloneElement(
  element,
  [props],
  [...children]
)

children将替代现有的children, props将和现有的props进行浅合并

0960.png