react children方法如何使用

这篇文章主要介绍“react children方法如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react children方法如何使用”文章能帮助大家解决问题。 react children方法用于处理“this.props.children”，其处理方式有：1、React.Children.map()；2、React.Children.forEach()；3、React.Children.count()；4、React.Children.only()；5、React.Children.toArray()。React.Children详解React.Children提供了处理this.props.children的工具，this.props.children可以任何数据（组件、字符串、函数等等）。React.children有5个方法：React.Children.map()，React.Children.forEach()、React.Children.count()、React.Children.only()、React.Children.toArray()，通常与React.cloneElement()结合使用来操作this.props.children。React.Children.map()React.Children.map()有些类似Array.prototype.map()。如果children是数组则此方法返回一个数组，如果是null或undefined则返回null或undefined。第一参数是children，即示例中的Father组件里的’hello world!’和() => 2333


functionFather({children}){
return(

{React.Children.map(children,(child,index)=>{
...
})}

)
}

helloworld!
{()=>2333}

2333React.Children.forEach()　　跟React.Children.map()一样，区别在于无返回。React.Children.count()React.Children.count()用来计数，返回child个数。不要用children.length来计数，如果Father组件里只有’hello world!’会返回12，显然是错误的结果。


functionFather({children}){
return(

{React.Children.count(children)}

)
}

helloworld!
{()=>2333}

2333React.Children.only()　　验证children里只有唯一的孩子并返回他。否则这个方法抛出一个错误。


functionFather({children}){
return(

{React.Children.only(children)}

)
}

helloworld!

React.Children.toArray()　　将children转换成Array，对children排序时需要使用


functionFather({children}){
letchildren1=React.Children.toArray(children);
return(

{children1.sort().join('')}

)
}

{'ccc'}
{'aaa'}
{'bbb'}

//渲染结果：aaabbbccc

如果不用React.Children.toArray()方法，直接写children.sort()就会报错Example：例如有这样的需求，完成一个操作需要3个步骤，每完成一个步骤，对应的指示灯就会点亮。index.jsx


import*asReactfrom'react';
import*asReactDOMfrom'react-dom';
import{Steps,Step}from'./Steps';
functionApp(){
return(

//完成相应的步骤，改变currentStep的值。如，完成第一步currentStep赋值为1，完成第二部赋值为2





);
}
ReactDOM.render(,document.getElementById('root'));

Steps.jsx

import*asReactfrom'react'; import'./step.less'; functionSteps({currentStep,children}){ return( {React.Children.map(children,(child,index)=>{ returnReact.cloneElement(child,{ index:index, currentStep:currentStep }); })} 　　 ); } functionStep({index,currentStep}:any){ return=index+1?'active':''}`}/>; } export{Steps,Step}; steps.less .indicator{display:inline-block;width:100px;height:20px;margin-right:10px;margin-top:200px;background:#f3f3f3;&.active{background:orange;} 关于“react children方法如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。推荐阅读： React组件模式是什么 React组件怎么用免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 react children 上一篇新闻： react不自动刷新如何解决下一篇新闻： react navigation方法如何使用猜你喜欢如何使用js制作动态无缝轮播用js实现调节音量滑块的方法 js实现简单的表格增删效果的方法介绍 js免费云主机域名实现简单的秒表效果的代码分享 js判断一个对象是否是数组（函数）的方法使用js实现简易计算器的代码分享 JavaScript利用键盘事件实现人物行走的代码 js实现滑动门效果的详细代码分享使用js判断打开项目的浏览器类别的代码 js数组方法slice()的使用方法介绍

steps.less

.indicator{display:inline-block;width:100px;height:20px;margin-right:10px;margin-top:200px;background:#f3f3f3;&.active{ background:orange; }

关于“react children方法如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

相关推荐: 如何使用JavaScript代码实现动态数字时钟

这篇文章主要介绍“如何使用JavaScript代码实现动态数字时钟”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如免费云主机域名何使用JavaScript代码实现动态数字时钟”文章能帮助大家解决问题。代码实现关于“如何…