reactchildren方法如何使用

这篇文章主要介绍“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

function Father({children}) {
    return(
      

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

    hello world!
    {() => 
2333
}

• React.Children.forEach()

跟React.Children.map()一样，区别在于无返回。

• React.Children.count()

React.Children.count()用来计数，返回child个数。不要用children.length来计数，如果Father组件里只有'hello world!'会返回12，显然是错误的结果。

function Father({children}) {
    return(
      

      {React.Children.count(children)}
      
    
    )        
 }

    hello world!
    {() => 
2333
}

• React.Children.only()

验证children里只有唯一的孩子并返回他。否则这个方法抛出一个错误。

function Father({children}) {
    return(
      

      {React.Children.only(children)}
      
    
    )        
 }

    hello world!

• React.Children.toArray()

将children转换成Array，对children排序时需要使用

function Father({children}) {
    let children1 = React.Children.toArray(children);
    return(
      

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

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

//渲染结果： aaa bbb ccc

如果不用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 (
        

          //完成相应的步骤，改变currentStep的值。如，完成第一步currentStep赋值为1，完成第二部赋值为2
            
            
            
            
        
    );
}
ReactDOM.render(, document.getElementById('root'));

Steps.jsx

import * as React from 'react';
import './step.less';
function Steps({currentStep, children}) {
    return (
        

         {React.Children.map(children, (child, index) => {
            return React.cloneElement(child, {
              index: index,
              currentStep: currentStep
            });
         })}
    　　
    );
}
function Step({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方法如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。