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方法如何使用





猜你喜欢



大数据可视化平台有哪些优势
服务器怎么批量删除文件夹
PHP Warning:fopen出错如何解决
安装wordpress到虚拟主机的步骤
python3.6如何使用impala连接hive
Sqoop导入数据异常怎么处理
Mongo怎么根据另外一个集合对当前集合进行操作
代理ip的功能和用处是什么
DKHhadoop集群怎么添加节点管理功能
                   免费云主机、域名                                 
web开发怎么排查超时问题


        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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
相关推荐: 如何用js实现瀑布流布局

这篇“如何用js实现瀑布流布局”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用js实现瀑布流布局”文章吧。 1、首先我们定义一个contai…

文章页内容下