Ich habe monatelang mit React entwickelt, ohne die wahre Leistungsfähigkeit des React-Komponentenmodells vollständig zu verstehen. Eines Tages beschloss ich, mich mit Komposition zu beschäftigen, und das habe ich gelernt.

Reaktionskomponenten und Kinder

In React kann eine Komponente ein, viele oder keine untergeordneten Elemente haben. Großartig, aber warten Sie –  Was sind „Kinder“? Lassen Sie es uns anhand eines Beispiels erklären:

Die Profilkomponente hat zwei untergeordnete Elemente: ProfileImage und ProfileDetails, während diese beiden keine untergeordneten Elemente haben.

"In JSX-Ausdrücken, die sowohl ein öffnendes als auch ein schließendes Tag enthalten, wird der Inhalt zwischen diesen Tags als spezielle Requisite übergeben: props.children"  –  React-Dokumentation

Im Wesentlichen handelt es sich bei props.children um eine spezielle Requisite, die automatisch an jede Komponente übergeben wird und zum Rendern des Inhalts zwischen den öffnenden und schließenden Tags beim Aufrufen einer Komponente verwendet werden kann. Solche Komponenten werden in der offiziellen Dokumentation als „Boxen“ bezeichnet.

Identifizieren von Komponenten anhand der JSX-Syntax

In Reacts JSX wird eine Komponente mit untergeordneten Elementen immer durch ein öffnendes Tag und ein schließendes Tag identifiziert. Jedes Kind muss zwischen diesen beiden Tags platziert werden, so wie wir oben gesehen haben. Wenn eine Komponente keine untergeordneten Elemente hat, können Sie sie entweder mit oder aufrufen, die letztere Syntax wird jedoch im Allgemeinen bevorzugt. Der Zweck selbstschließender Tags besteht darin, den Code kürzer und leichter lesbar zu machen.

props.children in Aktionen

Angenommen, wir möchten eine ImageSlider-Komponente erstellen. Unser Ziel ist es, die Komponente wie folgt aufzurufen:

Wie Sie sehen können, besteht ImageSlider aus mehreren , auf die über props.children zugegriffen und diese gerendert werden können.

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

Dank props.children können wir unseren Inhalt in einer Komponente verschachteln, genau wie wir allgemeine HTML-Elemente verschachteln.

Welche Arten von Inhalten sind für props.children zulässig?

Der über props.children an eine Komponente übergebene Inhalt kann Folgendes umfassen:

undefiniert, null, ein Boolescher Wert, eine Zahl, eine Zeichenfolge, ein React-Element oder ein Array eines dieser Typen rekursiv. Es kann sich auch um eine Funktion handeln, die einen dieser Typen zurückgibt.

Bitte beachten Sie, dass, wie in der React-Dokumentation erwähnt, false, null, undefiniert und true gültige untergeordnete Elemente sind, aber sie ignoriert und nicht gerendert werden. Wenn Sie möchten, dass false, true, null oder undefiniert gerendert werden, müssen Sie es zuerst in eine Zeichenfolge konvertieren:

  { String(undefined) }

Warum ist props.children so wichtig?

props.children ermöglicht uns das Zusammenstellen von Komponenten und damit auch unserer Front-End-Schnittstelle; Nutzung der wahren Leistungsfähigkeit des React-Komponentenmodells.

„React verfügt über ein leistungsstarkes Kompositionsmodell und wir empfehlen die Verwendung von Komposition anstelle von Vererbung, um Code zwischen Komponenten wiederzuverwenden.“ — Dokumentation reagieren

Wie in der offiziellen Dokumentation beschrieben, müssen Sie manchmal mehrere „Lücken“ in einer Komponente füllen. In solchen Fällen ist die Definition mehrerer benutzerdefinierter Requisiten möglicherweise der bessere Ansatz, anstatt props.children zu verwenden. wie im folgenden Beispiel gezeigt:

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

Reagieren.Kinder

"React.Children bietet Dienstprogramme für den Umgang mit der undurchsichtigen Datenstruktur props.children" — React-Dokumentation

Warum ist props.children eine „undurchsichtige Datenstruktur“?

Weil props.children aus einem, vielen oder keinem untergeordneten Element bestehen kann, was bedeutet, dass sein Wert ein einzelner untergeordneter Knoten, ein Array von untergeordneten Knoten oder sein kann. undefiniert bzw.. Dank der React.Children-API können wir problemlos mit props.children umgehen, ohne jeden seiner möglichen Typen zu berücksichtigen. Zum Glück wird alles für uns im Hintergrund erledigt.

Zum Zeitpunkt des Verfassens dieses Artikels bietet React.Children fünf verschiedene Dienstprogramme an:

• Karte

• für jede

• zählen

• nur

• toArray

Sehen wir uns anhand eines Beispiels an, wie wir React.Children verwenden können. Nehmen wir an, wir möchten jedem untergeordneten Element der ImageSlider-Komponente die spezielle CSS-Klasse img-special-class hinzufügen. Dies kann wie folgt erfolgen:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map ermöglicht es uns, props.children zu durchlaufen und jedes Element gemäß der als zweiten Parameter übergebenen Funktion zu transformieren. Um unser Ziel zu erreichen, haben wir React.cloneElement verwendet. Das liegt daran, dass wir den Wert der className-Requisite ändern mussten, aber Requisiten in React unveränderlich sind, also mussten wir jedes untergeordnete Element klonen.

Abschluss

Props.children zu beherrschen ist unerlässlich, um ein großartiger React-Entwickler zu werden und das volle Potenzial des React-Komponentenmodells auszuschöpfen. props.children ist eine der nützlichsten Funktionen von React, da sie uns die Möglichkeit gibt, untergeordnete Komponenten zu rendern. Aus diesem Grund sollte jeder Entwickler wissen, wie man es richtig verwendet.

Ich hoffe, dieser Artikel hilft Ihnen, die Komposition in React zu meistern.

Der Beitrag „A Complete Guide To props.children In React“ erschien zuerst auf Writech.