Wie kann man Requisiten in React effizient an this.props.children übergeben?

Wie man Requisiten an {this.props.children} weitergibt

Einführung

In React stoßen Sie möglicherweise auf ein Szenario, in dem Sie eine Wrapper-Komponente verwenden möchten Kapseln Sie eine Gruppe untergeordneter Komponenten und geben Sie einige gemeinsame Eigenschaften an sie weiter.

Klonen von Kindern mit neuen Requisiten

Ein Ansatz besteht darin, React.Children zum Iterieren zu verwenden über die untergeordneten Elemente und klonen Sie jedes Element mit den neuen Requisiten mithilfe von React.cloneElement. Diese Methode wird jedoch aufgrund möglicher Codefragilität nicht empfohlen.

<br>const Child = ({ childName, sayHello }) => (<br> <button onClick={() => sayHello(childName)}>{childName}</button><br>);</p>
<p>function Parent({children }) {<br> Funktion sayHello(childName) {</p>
<pre class="brush:php;toolbar:false">console.log(`Hello from ${childName} the child`);

}

const childrenWithProps = React.Children.map(children, child => {

if (React.isValidElement(child)) {
  return React.cloneElement(child, { sayHello });
}
return child;

});

return

{childrenWithProps}

;
}

function App() {
// Weniger typsichere, aber einfachere Alternative
return (

<Parent>
  <Child childName="Billy" />
  <Child childName="Bob" />
</Parent>

);
}

ReactDOM.render(, document.getElementById("container"));

Alternativen zum Klonen Kinder

Für die Weitergabe von Eigenschaften an Kinder sollten Sie die folgenden Alternativen in Betracht ziehen:

• Hebezustand: Verschieben Sie die gemeinsam genutzten Eigenschaften in den Zustand der übergeordneten Komponente und geben Sie sie über Requisiten weiter.
• Kontext-API: Erstellen Sie ein Kontextobjekt, um Daten zu teilen über Komponenten hinweg, unabhängig von ihrer hierarchischen Beziehung.
• Render-Requisiten: Definieren Sie eine Render-Requisite in der Wrapper-Komponente und übergeben Sie sie an die untergeordnete Komponente als Funktion, die Requisiten als Eingabe akzeptiert.

Das obige ist der detaillierte Inhalt vonWie kann man Requisiten in React effizient an this.props.children übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!