Comment transmettre des props aux éléments enfants dans React

Les composants React peuvent afficher le contenu placé entre leurs balises grâce à props.children. Afficher ce contenu n’ajoute pas automatiquement de props aux éléments qu’il contient. Pour partager une valeur avec les descendants, utilisez Context ; pour ajouter une prop à un élément enfant précis, utilisez React.cloneElement().

Par exemple, une boîte de dialogue de messagerie peut recevoir du texte, un emoji ou une combinaison d’éléments. Son composant réutilisable n’a pas besoin de connaître ce contenu à l’avance : il peut afficher props.children à l’endroit prévu pour le corps de la boîte de dialogue.

Transmettre des props aux éléments enfants dans React

Un composant enveloppe peut afficher le contenu imbriqué en renvoyant {children} dans son balisage. Par exemple, function Box({ children }) { return <div>{children}</div>; } affiche ce que le parent place entre <Box> et </Box>. Le parent peut l’associer à un enfant comme dans function App() { return <Box><Text /></Box>; }.

Cette composition transmet l’élément Text à Box dans la prop children ; elle ne définit pas de prop color sur Text. Si l’enfant a besoin d’une valeur, transmettez-la explicitement lors de sa création, par exemple avec <Text color="red" />, ou choisissez l’une des approches ci-dessous si l’enveloppe doit fournir cette valeur.

Ces fragments JSX illustrent l’assemblage des composants et supposent que React est disponible dans l’application ; ce ne sont ni des fichiers autonomes ni des résultats d’exécution rapportés. L’enfant peut lire la valeur avec une signature de fonction telle que function Text({ color }) { return <p style={{ color }}>Welcome to App</p>; }.

Transmettre des props aux éléments enfants dans React avec l’API Context

Utilisez Context lorsque plusieurs composants d’un sous-arbre ont besoin de la même valeur et que la transmettre par chaque composant intermédiaire ajouterait un câblage inutile. Context rend une valeur accessible aux consommateurs situés sous son fournisseur ; il est distinct des props et ne transmet pas littéralement une prop à chaque composant.

Créez un contexte, par exemple const ColorContext = React.createContext("black");, puis placez un fournisseur autour du contenu qui a besoin de la valeur : <ColorContext.Provider value="red">{children}</ColorContext.Provider>. Un descendant peut la lire avec const color = React.useContext(ColorContext); et l’appliquer, par exemple avec <p style={{ color }}>Welcome to App</p>. La valeur du fournisseur est accessible aux composants rendus à l’intérieur de celui-ci ; gardez donc le fournisseur autour du sous-arbre concerné. La valeur par défaut est utilisée uniquement lorsqu’aucun fournisseur correspondant ne se trouve au-dessus du consommateur. Si un fournisseur correspondant existe, le consommateur reçoit la valeur qu’il fournit, y compris undefined, plutôt que la valeur par défaut.

Cette approche convient aux valeurs, comme un thème ou une langue, utilisées par plusieurs descendants. Pour un seul enfant qui a besoin d’une valeur supplémentaire, le clonage peut être plus direct.

Transmettre des props aux éléments enfants dans React avec React.cloneElement()

React.cloneElement() crée un nouvel élément à partir d’un élément React valide et d’un ensemble de props. Un composant enveloppe peut utiliser React.cloneElement(children, { color: "red" }) pour ajouter ou remplacer color sur un enfant tout en conservant ses autres props. L’enfant peut ensuite utiliser color, comme dans l’exemple de Text ci-dessus.

Cette approche suppose que children est un élément React valide unique. props.children peut plutôt être du texte, plusieurs éléments ou avoir une autre forme : vérifiez sa forme ou gérez-la d’une autre manière avant d’appeler React.cloneElement() ; du texte arbitraire et plusieurs enfants ne peuvent pas être transmis à cette forme conçue pour un seul élément comme s’il s’agissait d’un élément unique. Si le composant enveloppe doit accepter des contenus variés, affichez-les tels quels ou utilisez Context lorsque les descendants ont besoin d’une valeur partagée.

Choisissez Context pour une valeur utilisée dans tout un sous-arbre. Choisissez React.cloneElement() lorsque le composant enveloppe doit modifier intentionnellement un élément enfant précis. Aucune de ces approches ne change le rôle fondamental de props.children : cette prop représente le contenu imbriqué fourni par le parent.