摘要:是顶层之一,为处理这个封闭的数据结构提供了有用的工具。对象的属性与组件的属性一一对应,但是有一个例外,就是属性。它表示组件的所有子节点。在每一个直接子级包含在参数中的上调用函数,此函数中的指向上下文。返回中仅有的子级。
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
React.Children.forEach
React.Children.forEach(object children, function fn [object context])
类似于 React.Children.map(),但是不返回对象。
使用方法 this.props.children.forEach(function (child) { return
类似于 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)); //2console.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
摘要:四总结上面一系列的操作最终的结果都需要用来反应出来,所以关键点是如何在中使用来动态生成接下来的改进实现可以滑动的标签页 一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何实现 既然用React写,那么它就必然是一个组件,首先考虑你怎么使用这个组件,也就是这个组件的接口是怎么样的。 ...
摘要:四总结上面一系列的操作最终的结果都需要用来反应出来,所以关键点是如何在中使用来动态生成接下来的改进实现可以滑动的标签页 一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何实现 既然用React写,那么它就必然是一个组件,首先考虑你怎么使用这个组件,也就是这个组件的接口是怎么样的。 ...
摘要:渲染属性这里有个组件,使用了一个渲染回调函数。这个状态被提升到了容器中,通过添加回调函数,回调中可以更新本地状态。这个是正常的受控的输入不允许变更,这使得这个模式成为可能。 中文版:https://reactpatterns.cn/原版:https://reactpatterns.com 函数组件 (Function component) 函数组件 是最简单的一种声明可复用组件的方法 ...
摘要:开发环境比生产环境多了,,属性,并且以及被冻结,无法修改配置。当这个是元素的,那么其与是无法传入新元素上的与。返回的元素相当于其源码与类似,不同的地方是在开发环境下不会对调用与对与进行获取拦截。 showImg(https://segmentfault.com/img/remote/1460000018335788?w=600&h=300); react相关库源码浅析 react ts...
阅读 727·2023-04-25 16:55
阅读 2782·2021-10-11 10:59
阅读 2050·2021-09-09 11:38
阅读 1756·2021-09-03 10:40
阅读 1465·2019-08-30 15:52
阅读 1074·2019-08-30 15:52
阅读 917·2019-08-29 15:33
阅读 3432·2019-08-29 11:26