Eine vollständige Anleitung zu props.children in React

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 Moment  –  Was sind „Kinder“? Lassen Sie es uns anhand eines Beispiels erklären:

<Profile>
  <ProfileImage src="/asset/profile-img.png" />
  <ProfileDetails name="Antonello" surname="Zanini" />
</Profile>

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 Komponenten hat, können Sie sie entweder mit oder , 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

Nehmen wir an, dass wir eine ImageSlider-Komponente erstellen möchten. Unser Ziel ist es, die Komponente einfach so aufzurufen:

<ImageSlider>
  <img src="/assets/img-1.pg" />
  <img src="/assets/img-2.pg" />
  <img src="/assets/img-3.pg" />
</ImageSlider>

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

export default function ImageSlider(props) { 
    return (
      <div className="img-slider">
        {props.children}
      </div>
    );  
}

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

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

Der Inhalt, der über props.children an eine Komponente übergeben wird, 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, sie jedoch ignoriert und nicht gerendert werden. Wenn Sie möchten, dass false, true, null oder undefiniert gerendert wird, müssen Sie es zuerst in eine Zeichenfolge konvertieren:

<MyComponent>
  { String(undefined) }
</MyComponent>

Warum ist props.children so wichtig?

props.children ermöglicht es uns, Komponenten und damit auch unsere Front-End-Schnittstelle zusammenzustellen; Nutzen Sie die wahre 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.“ — Reaktionsdokumentation

Wie in der offiziellen Dokumentation beschrieben, müssen Sie manchmal mehrere „Löcher“ in einer Komponente füllen. In solchen Fällen kann die Definition mehrerer benutzerdefinierter Requisiten anstelle der Verwendung von props.children der bessere Ansatz sein. wie im folgenden Beispiel gezeigt:

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

  return (
    <div className="split-pane">
      <div className="left-pane">
        { left }      
      </div>
      <div className="right-pane">
        { right }      
      </div>
    </div>
  );
}

Reagieren.Kinder

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

Warum ist props.children eine „undurchsichtige Datenstruktur“?

Da props.children aus einem, vielen oder keinem untergeordneten Element bestehen kann, bedeutet dies, 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

• forEach

• Anzahl

• 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 (
    <div className="img-slider">
      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    </div>
  );
}

React.Children.map allows us to iterate over props.children and transform each element according to the function passed as the second parameter. To achieve our goal, we used React.cloneElement. This is because we needed to change the value of the className prop, but props are immutable in React, so we had to clone each child.

Conclusion

Mastering props.children is essential to becoming a great React developer and beginning to harness the full potential of the React component model. props.children is one of React's most useful features, since it gives us the ability to render child components. Because of this, every developer should know how to use it properly.

I hope this article helps you master composition in React.

The post "A Complete Guide To props.children In React" appeared first on Writech.

Das obige ist der detaillierte Inhalt vonEine vollständige Anleitung zu props.children in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!