React.Children的用法详解

更新时间：2021年04月06日 10:24:46 作者：uuihoo

这篇文章主要介绍了React.Children的用法详解，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下

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 Agent 自定义实现代码
在使用langchain的ReactAgent遇到问题后,作者尝试自定义ReactAgent实现,通过详细分析langchain中的agent功能和问题,结合React思想,作者设计了新的agent逻辑并在GitHub上分享了代码,新的ReactAgent通过改进prompt和工具调用逻辑,提升了任务执行的效果和稳定性
2024-10-10
React中嵌套组件与被嵌套组件的通信过程
这篇文章主要介绍了React中嵌套组件与被嵌套组件的通信过程，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
React简单介绍
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它
2017-05-05
React如何实现全屏监听Esc键
这篇文章主要介绍了React如何实现全屏监听Esc键，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React精髓！一篇全概括小结(急速)
这篇文章主要介绍了React精髓！一篇全概括小结(急速)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
详解React中合并单元格的正确写法
用表格进行页面布局,页面布局在各种浏览器的的兼容性, 本文主要介绍了详解React中合并单元格的正确写法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Webpack 4.x搭建react开发环境的方法步骤
这篇文章主要介绍了Webpack 4.x搭建react开发环境的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
react中路由跳转及传参的实现
本文主要介绍了react中路由跳转及传参的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
React Native可定制底板组件Magic Sheet使用示例
这篇文章主要为大家介绍了React Native可定制的底板组件Magic Sheet使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
React使用高德地图的实现示例(react-amap)
这篇文章主要介绍了React使用高德地图的实现示例(react-amap)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04