子反応メソッドの使い方

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

このチュートリアルの動作環境: Windows 10 システム、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() に似ています。このメソッドは、子が配列の場合は配列を返し、null または未定義の場合は null または未定義を返します。最初のパラメータは Children で、この例では、Father コンポーネントの「hello world!」および () =>

2333

関数です。 2 番目のパラメータは function です。function の最初のパラメータは走査される各項目であり、2 番目のパラメータは対応するインデックスです。

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() は、子の数を数えて返します。カウントに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()

Childrens に子が 1 つだけあることを確認し、その子を返します。それ以外の場合、このメソッドはエラーをスローします。

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

• React.Children.toArray()

子を配列に変換します。子を並べ替えるときは

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() を直接記述すると、エラーが報告されます

例:

たとえば、このような要件がある場合、操作を完了するには 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 ビデオ チュートリアル 」

以上が子反応メソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。