<center>this.props.children</center>

最新推荐文章于 2021-09-17 21:45:27 发布

转载最新推荐文章于 2021-09-17 21:45:27 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/74920b5c50ad

前端面试专栏收录该内容

16 篇文章

订阅专栏

本文讲解了React中如何处理子组件的this.props.children属性，包括其数据类型及使用React.Children工具方法进行遍历和计数的方法。

this.props对象的属性与组件的属性一一对应，但是有个例外：this.props.children，他表示组件所有的子节点。

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});
ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取。这里需要注意， this.props.children 的值有三种可能：

如果当前组件没有子节点，它就是 undefined；
如果有一个子节点，数据类型是 object；
如果有多个子节点，数据类型就是 array
React 提供一个工具方法 React.Children来处理 this.props.children。我们可以用React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

1.React.Children.map

object React.Children.map(object children, function fn [, object context])
在每一个直接子级（包含在children参数中的）上调用 fn 函数，此函数中的 this 指向上下文。如果children 是一个内嵌的对象或者数组，它将被遍历：
不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。

2.React.Children.forEach

React.Children.forEach(object children, function fn [, object context])
类似于React.Children.map()，但是不返回对象。

3.React.Children.count

number React.Children.count(object children)
返回 children 当中的组件总数，和传递给 map 或者forEach的回调函数的调用次数一致。

4.React.Children.only

object React.Children.only(object children)
返回 children 中仅有的子级。否则抛出异常。