這篇文章主要介紹“react children方法如何使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“react children方法如何使用”文章能幫助大家解決問題。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、新樂網(wǎng)站維護(hù)、網(wǎng)站推廣。

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可以任何數(shù)據(jù)（組件、字符串、函數(shù)等等）。React.children有5個方法：React.Children.map()，React.Children.forEach()、React.Children.count()、React.Children.only()、React.Children.toArray()，通常與React.cloneElement()結(jié)合使用來操作this.props.children。

• React.Children.map()

React.Children.map()有些類似Array.prototype.map()。如果children是數(shù)組則此方法返回一個數(shù)組，如果是null或undefined則返回null或undefined。第一參數(shù)是children，即示例中的Father組件里的'hello world!'和() =>

2333

函數(shù)。第二個參數(shù)是fucntion，function的參數(shù)第一個是遍歷的每一項，第二個是對應(yīng)的索引。

function Father({children}) {
    return(
      

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

    hello world!
    {() => 
2333
}

• React.Children.forEach()

跟React.Children.map()一樣，區(qū)別在于無返回。

• React.Children.count()

React.Children.count()用來計數(shù)，返回child個數(shù)。不要用children.length來計數(shù)，如果Father組件里只有'hello world!'會返回12，顯然是錯誤的結(jié)果。

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轉(zhuǎn)換成Array，對children排序時需要使用

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

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

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

//渲染結(jié)果： aaa bbb ccc

如果不用React.Children.toArray()方法，直接寫children.sort()就會報錯

Example：

例如有這樣的需求，完成一個操作需要3個步驟，每完成一個步驟，對應(yīng)的指示燈就會點亮。

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Steps, Step} from './Steps';
function App() {
    return (
        

          //完成相應(yīng)的步驟，改變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;
  }

關(guān)于“react children方法如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

網(wǎng)頁名稱：reactchildren方法如何使用
標(biāo)題網(wǎng)址：http://weahome.cn/article/gjshoi.html