这篇文章主要介绍“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
函数。第二个参数是fucntion,function的参数第一个是遍历的每一项,第二个是对应的索引。2333function Father({children}) {
return(
React.Children.forEach()
跟React.Children.map()一样,区别在于无返回。
React.Children.count()
React.Children.count()用来计数,返回child个数。不要用children.length来计数,如果Father组件里只有'hello world!'会返回12,显然是错误的结果。
2333function Father({children}) {
return(
React.Children.only()
验证children里只有唯一的孩子并返回他。否则这个方法抛出一个错误。
function Father({children}) {
return(
React.Children.toArray()
将children转换成Array,对children排序时需要使用
function Father({children}) {
let children1 = React.Children.toArray(children);
return(
如果不用React.Children.toArray()方法,直接写children.sort()就会报错
Example:
例如有这样的需求,完成一个操作需要3个步骤,每完成一个步骤,对应的指示灯就会点亮。
index.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Steps, Step} from './Steps';
function App() {
return (
Steps.jsx
steps.less 关于“react children方法如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。import * as React from 'react';
import './step.less';
function Steps({currentStep, children}) {
return (
.indicator { display: inline-block; width: 100px; height: 20px; margin-right: 10px; margin-top: 200px; background: #f3f3f3; &.active {
background: orange;
}
网页名称:reactchildren方法如何使用
本文URL:http://cdkjz.cn/article/gjshoi.html