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

<br>const Child = ({ childName, sayHello }) => (<br> <button onClick={() => sayHello(childName)}>{childName}</button><br>);</p>
<p>function Parent({children }) {<br> Funktion sayHello(childName) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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

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!