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()。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react children方法怎麼用？

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的參數第一個是遍歷的每一項，第二個是對應的索引。

function Father({children}) {
    return(
      <div>
      {React.Children.map(children, (child, index) => {
          ...
      })}
      </div>    
    )        
 }
<Father>
    hello world!
    {() => <p>2333</p>}
</Father>

• React.Children.forEach()

　　跟React.Children.map()一樣，差別在於無回傳。

• React.Children.count()

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

function Father({children}) {
    return(
      <div>
      {React.Children.count(children)}
      </div>    
    )        
 }
<Father>
    hello world!
    {() => <p>2333</p>}
</Father>

• React.Children.only()

#　　驗證children裡只有唯一的孩子並回他。否則這個方法拋出一個錯誤。

function Father({children}) {
    return(
      <div>
      {React.Children.only(children)}
      </div>    
    )        
 }
<Father>
    hello world!
</Father>

• React.Children.toArray()

　　將children轉換成Array，對children排序時需要使用

function Father({children}) {
    let children1 = React.Children.toArray(children);
    return(
      <div>
      {children1.sort().join(&#39; &#39;)}
      </div>    
    )        
 }
<Father>
    {&#39;ccc&#39;}
    {&#39;aaa&#39;}
    {&#39;bbb&#39;}
</Father>
//渲染结果： 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 (
        <div>
        <Steps currentStep={1}>  //完成相应的步骤，改变currentStep的值。如，完成第一步currentStep赋值为1，完成第二部赋值为2
            <Step />
            <Step />
            <Step />
            </Steps>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById(&#39;root&#39;));

Steps.jsx

import * as React from 'react';
import './step.less';
function Steps({currentStep, children}) {
    return (
        <div>
         {React.Children.map(children, (child, index) => {
            return React.cloneElement(child, {
              index: index,
              currentStep: currentStep
            });
         })}
    　　</div>
    );
}
function Step({index, currentStep}: any) {
    return <div className={`indicator${currentStep >= index + 1 ? &#39; active&#39; : &#39;&#39;}`} />;
}
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影片教學》

以上是react children方法怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！