#react# this.props.children的处理

yuanzhanghu 发布于2019-08-26 18:26 / 2935人阅读

摘要：是顶层之一，为处理这个封闭的数据结构提供了有用的工具。对象的属性与组件的属性一一对应，但是有一个例外，就是属性。它表示组件的所有子节点。在每一个直接子级包含在参数中的上调用函数，此函数中的指向上下文。返回中仅有的子级。

React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。
this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
this.props.children的返回值情况如下：


   hello
   hello

//返回两个子节点



//返回undefined


null
//返回null

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

React.Children.map

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

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

使用方法：
React.Children.map(this.props.children, function (child) {
    return {child};
})

React.Children.forEach

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

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

使用方法
this.props.children.forEach(function (child) {
    return {child}
})

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

React.Children.count

number React.Children.count(object children)

返回 children 当中的组件总数，和传递给 map 或者 forEach 的回调函数的调用次数一致。


    hello
    hello

console.log(React.Children.count(this.props.children)); //2


console.log(React.Children.count(this.props.children)); //0

null
console.log(React.Children.count(this.props.children)); //1

React.Children.only

object React.Children.only(object children)

返回 children 中仅有的子级。否则抛出异常。
这里仅有的子级，only方法接受的参数只能是一个对象，不能是多个对象（数组）

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110201.html

用React实现点击切换的标签页

摘要：四总结上面一系列的操作最终的结果都需要用来反应出来，所以关键点是如何在中使用来动态生成接下来的改进实现可以滑动的标签页一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何实现既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。 ...

xushaojieaaa 2019-08-22 10:59 评论0 收藏0
用React实现点击切换的标签页

摘要：四总结上面一系列的操作最终的结果都需要用来反应出来，所以关键点是如何在中使用来动态生成接下来的改进实现可以滑动的标签页一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何实现既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。 ...

codeKK 2019-08-01 15:00 评论0 收藏0
React 模式（中文版）

摘要：渲染属性这里有个组件，使用了一个渲染回调函数。这个状态被提升到了容器中，通过添加回调函数，回调中可以更新本地状态。这个是正常的受控的输入不允许变更，这使得这个模式成为可能。中文版：https://reactpatterns.cn/原版：https://reactpatterns.com 函数组件 (Function component) 函数组件是最简单的一种声明可复用组件的方法 ...

hzx 2019-08-23 14:55 评论0 收藏0
react源码浅析(三)：ReactElement

摘要：开发环境比生产环境多了，，属性，并且以及被冻结，无法修改配置。当这个是元素的，那么其与是无法传入新元素上的与。返回的元素相当于其源码与类似，不同的地方是在开发环境下不会对调用与对与进行获取拦截。 showImg(https://segmentfault.com/img/remote/1460000018335788?w=600&h=300); react相关库源码浅析 react ts...

Hujiawei 2019-08-23 15:33 评论0 收藏0
React入门学习

摘要：对象的属性与组件的属性一一对应，但是有一个例外，就是属性，它表示组件的所有子节点。此外，还提供两种特殊状态的处理函数。组件中样式的写法这种方式错误使用这种方式，第一重大括号表示这是语法，第二重大括号表示样式对象。如何渲染到容器直接上代码： //第一个参数是构造的组件，第二个参数是使用组件的容器 ReactDom.render( , document.getEleme...

laznrbfe 2019-08-19 17:34 评论0 收藏0