So verwenden Sie die React-Children-Methode

Die React-Children-Methode wird zur Verarbeitung von „this.props.children“ verwendet. Ihre Verarbeitungsmethoden sind: 1. React.Children.map(); 3. React.Children.count () ; 4. React.Children.only(); 5. React.Children.toArray().

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie verwende ich die React-Children-Methode?

Detaillierte Erklärung von React.Children

React.Children bietet Tools zur Verarbeitung von this.props.children. Bei this.props.children kann es sich um beliebige Daten (Komponente, Zeichenfolge, Funktion usw.) handeln. React.children hat 5 Methoden: React.Children.map(), React.Children.forEach(), React.Children.count(), React.Children.only(), React.Children.toArray(), normalerweise mit React .cloneElement() wird in Verbindung mit this.props.children verwendet.

• React.Children.map()

React.Children.map() ähnelt etwas Array.prototype.map(). Diese Methode gibt ein Array zurück, wenn „Children“ ein Array ist, oder null oder undefiniert, wenn es null oder undefiniert ist. Der erste Parameter ist „Children“, also die Funktionen „Hallo Welt!“ und „() =>2333

“. Der zweite Parameter ist die Funktion. Der erste Parameter der Funktion ist jedes durchlaufene Element und der zweite Parameter ist der entsprechende Index.

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

• React.Children.forEach()

　 Wie React.Children.map(), mit dem Unterschied, dass es keine Rückgabe gibt.

• React.Children.count()

React.Children.count() wird verwendet, um die Anzahl der Kinder zu zählen und zurückzugeben. Verwenden Sie nicht „children.length“ zum Zählen. Wenn in der Vaterkomponente nur „Hallo Welt!“ vorhanden ist, wird 12 zurückgegeben, was offensichtlich ein falsches Ergebnis ist.

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

• React.Children.only()

Stellen Sie sicher, dass unter den Kindern nur ein Kind vorhanden ist, und geben Sie es zurück. Andernfalls gibt diese Methode einen Fehler aus.

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

• React.Children.toArray()

Konvertieren Sie Kinder in Array. Wenn Sie die Methode React.Children.toArray() nicht verwenden, müssen Sie

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

verwenden children.sort() direkt. Ein Fehler wird gemeldet

Beispiel:

Wenn beispielsweise eine solche Anforderung vorliegt, sind 3 Schritte erforderlich, um einen Vorgang abzuschließen. Jedes Mal, wenn ein Schritt abgeschlossen ist, wird der entsprechende Indikator angezeigt Licht wird aufleuchten.

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;
  }

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die React-Children-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!