分享更有价值
被信任是一种快乐

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方法如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. React组件模式是什么
  2. 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…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册