Detaillierte Verwendung von React.Children

React.Children ist eine der APIs der obersten Ebene, die nützliche Tools für die Arbeit mit der geschlossenen Datenstruktur von this.props.children bereitstellt.

Die Eigenschaften des this.props-Objekts entsprechen eins zu eins den Eigenschaften der Komponente, mit einer Ausnahme: der this.props.children-Eigenschaft. Es stellt alle untergeordneten Knoten der Komponente dar.

1. Reagieren.Children.map

Objekt React.Children.map(Objektkinder, Funktion fn [, Objektkontext])
 
Anwendung:
React.Children.map(this.props.children, Funktion (Kind) {
  Rückgabewert <li>{Kind}</li>;
})
Andere Methoden this.props.children.forEach(function (child) {
  Rückgabewert <li>{Kind}</li>
})

Ruft die Funktion fn für jedes unmittelbar untergeordnete Element (im Parameter „children“ enthalten) auf, wobei sich dies auf den Kontext bezieht. Wenn es sich bei den untergeordneten Objekten um verschachtelte Objekte oder Arrays handelt, wird darüber iteriert: Es wird kein Containerobjekt an fn übergeben. Wenn der Parameter „children“ null oder undefiniert ist, wird anstelle eines leeren Objekts null oder undefiniert zurückgegeben.

<Skripttyp="text/jsx">
 var NotesList = React.createClass({
  rendern: Funktion() {
   zurückkehren (
    <ol>
     {
      React.Children.map(this.props.children, Funktion (Kind) {
          Rückgabewert <li>{Kind}</li>;
        })
     }
    </ol>
   );
  }
 });
 
 Reagieren.render(
  <Notizenliste>
   <span>hallo</span>
   <span>hallo</span>
  </NotesList>,
  Dokument.Text
 );
</Skript>

Hierbei ist zu beachten, dass es für this.props.children drei mögliche Werte gibt: Wenn die aktuelle Komponente keine untergeordneten Knoten hat, ist sie undefined ; wenn ein untergeordneter Knoten vorhanden ist, ist der Datentyp object ; wenn mehrere untergeordnete Knoten vorhanden sind, ist der Datentyp array . Seien Sie also vorsichtig beim Umgang mit this.props.children .

React bietet eine Hilfsmethode React.Children zum Verarbeiten this.props.children . Wir können React.Children.map verwenden, um über untergeordnete Knoten zu iterieren, ohne uns Gedanken darüber machen zu müssen, ob der Datentyp von this.props.children „ undefined “ oder object ist.

Geben Sie das folgende ReactElement ein:

<Notizenliste>
  <span>hallo</span>
  <span>hallo</span>
</NotesList>
//Gibt zwei untergeordnete Knoten zurück <NotesList></NotesList>
//Undefiniert zurückgeben
 
 
<NotesList>null</NotesList>
//Gibt null zurück

2. Reagieren.Children.forEach

React.Children.forEach(Objektuntergeordnete Objekte, Funktion fn [, Objektkontext])

Ähnlich wie React.Children.map(), gibt aber kein Objekt zurück.

3. Reagieren.Kinder.zählen

Nummer React.Children.count(Objektkinder)

Gibt die Gesamtzahl der Komponenten in untergeordneten Elementen zurück, die der Anzahl der Aufrufe der an map oder forEach übergebenen Rückruffunktion entspricht.

rendern: Funktion() {
  Konsole.log(React.Children.count(diese.props.children)); //2
 
  zurückkehren (
   <ol>
    {
     this.props.children.forEach(Funktion (Kind) {
       Rückgabewert <li>{Kind}</li>
     })
    }
   </ol>
  );
 }

Verschiedene ReactElements-Ausgabezählwerte:

<Notizenliste>
  <span>hallo</span>
  <span>hallo</span>
</NotesList>
Konsole.log(React.Children.count(diese.props.children)); //2
 
<Notizenliste></Notizenliste>
Konsole.log(React.Children.count(this.props.children)); //0
 
<NotesList>null</NotesList>
Konsole.log(React.Children.count(diese.props.children)); //1

4. Reagieren.Nur für Kinder

Objekt React.Children.only(Objekt Kinder)

Gibt das einzige untergeordnete Kind unter „Kinder“ zurück. Andernfalls wird eine Ausnahme ausgelöst.

Das einzige untergeordnete Element hier, die einzige Methode, kann nur ein einzelnes Objekt als Parameter akzeptieren, nicht mehrere Objekte (Arrays).

Konsole.log(React.Children.only(this.props.children[0])); 
//Ausgabeobjekt this.props.children[0]

Oben finden Sie den detaillierten Inhalt der ausführlichen Erklärung zur Verwendung von React.Children. Weitere Informationen zur Verwendung von React.Children finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!