Comment transmettre efficacement des accessoires à this.props.children dans React ?

Comment transmettre des accessoires à {this.props.children}

Introduction

Dans React, vous pouvez rencontrer un scénario dans lequel vous souhaitez utiliser un composant wrapper pour encapsuler un groupe de composants enfants et leur transmettre certaines propriétés communes.

Clonage d'enfants avec de nouveaux accessoires

Une approche consiste à utiliser React.Children pour itérer sur les enfants et clonez chaque élément avec les nouveaux accessoires en utilisant React.cloneElement. Cependant, cette méthode n'est pas recommandée en raison de la fragilité potentielle du code.

<br>const Child = ({ childName, sayHello }) => (<br> <button onClick={() => sayHello(childName)}>{childName}</button><br>);</p>
<p>fonction Parent({ enfants }) {<br> fonction 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;

});

retour

{childrenWithProps}

;
}

function App() {
// Alternative moins sécurisée mais plus simple
return (

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

);
}

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

Alternatives au clonage d'enfants

Pour transmettre des propriétés aux enfants, considérez ce qui suit alternatives :

• État de levage : déplacez les propriétés partagées vers l'état du composant parent et transmettez-les via les accessoires.
• API de contexte : Créez un objet Contexte pour partager des données entre les composants, quelle que soit leur relation hiérarchique.
• Rendu Props : définissez un accessoire de rendu dans le composant wrapper et transmettez-le au composant enfant en tant que fonction qui prend les accessoires en entrée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!