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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(`Hello from ${childName} the child`);