React.Children的用法详解

目录

• 1、React.Children.map
• 2、React.Children.forEach
• 3、React.Children.count
• 4、React.Children.only

React.Children 是顶层API之一，为处理 this.PRops.children 这个封闭的数据结构提供了有用的工具。

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

1、React.Children.map

object React.Children.map(object children, function fn [, object context]) 使用方法：React.Children.map(this.props.children, function (child) {
      return li>
{
child}
    /li>
    ;
}
)其他方法this.props.children.foreach(function (child) {
      return li>
{
child}
    /li>
}
    )

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

script tyPE="text/jsx">
 VAR NotesList = React.createClass({
  render: function() {
       return (    ol>
     {
      React.Children.map(this.props.children, function (child) {
              return li>
{
child}
    /li>
    ;
        }
)     }
        /ol>
       );
  }
 }
    );
      React.render(  NotesList>
       span>
    hello/span>
       span>
    hello/span>
      /NotesList>
    ,  document.body );
    /script>
    

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ; 如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

传入如下ReactElement：

NotesList>
      span>
    hello/span>
      span>
    hello/span>
    /NotesList>
    //返回两个子节点  NotesList>
    /NotesList>
    //返回undefined  NotesList>
    null/NotesList>
    //返回null

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 的回调函数的调用次数一致。

render: function() {
      console.LOG(React.Children.count(this.props.children));
     //2   return (   ol>
    {
     this.props.children.forEach(function (child) {
           return li>
{
child}
    /li>
     }
)    }
       /ol>
      );
 }
    

不同的ReactElement，输出count值:

NotesList>
      span>
    hello/span>
      span>
    hello/span>
    /NotesList>
    console.log(React.Children.count(this.props.children));
     //2 NotesList>
    /NotesList>
    console.log(React.Children.count(this.props.children));
     //0 NotesList>
    null/NotesList>
    console.log(React.Children.count(this.props.children));
     //1

4、React.Children.only

object React.Children.only(object children)

返回 children 中 仅有的子级。否则抛出异常。

这里仅有的子级，only方法接受的参数只能是一个对象，不能是多个对象（数组）。

console.log(React.Children.only(this.props.children[0]));
     //输出对象this.props.children[0]

以上就是React.Children的用法详解的详细内容，更多关于React.Children的用法的资料请关注其它相关文章！

• React Hook的使用示例
• 深入理解React Native核心原理(React Native的桥接（Bridge)
• React+Koa实现文件上传的示例
• 基于react hooks,zarm组件库配置开发h5表单页面的实例代码
• React antd tabs切换造成子组件重复刷新
• 一看就懂的ReactJs基础入门教程-精华版
• ReactRouter的实现方法
• React.cloneElement的使用详解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！