Vous pouvez utiliser React.cloneElement
, il est préférable de savoir comment cela fonctionne avant de commencer à l'utiliser dans votre application. Il est introduit dans React v0.13
, lisez la suite pour plus d'informations, donc quelque chose avec ce travail pour vous:
<div>{React.cloneElement(this.props.children, {...this.props})}</div>
Apportez donc les lignes de la documentation React pour que vous compreniez comment tout cela fonctionne et comment vous pouvez les utiliser:
Dans React v0.13 RC2, nous allons introduire une nouvelle API, similaire à React.addons.cloneWithProps, avec cette signature:
React.cloneElement(element, props, ...children);
Contrairement à cloneWithProps, cette nouvelle fonction n'a pas de comportement intégré magique pour la fusion de style et className pour la même raison que nous n'avons pas cette fonctionnalité de transferPropsTo. Personne ne sait exactement quelle est la liste complète des choses magiques, ce qui rend difficile de raisonner sur le code et difficile à réutiliser lorsque le style a une signature différente (par exemple dans le prochain React Native).
React.cloneElement est presque équivalent à:
<element.type {...element.props} {...props}>{children}</element.type>
Cependant, contrairement à JSX et cloneWithProps, il conserve également les références. Cela signifie que si vous obtenez un enfant avec une référence, vous ne le volerez pas accidentellement à votre ancêtre. Vous obtiendrez la même référence attachée à votre nouvel élément.
Un modèle courant consiste à cartographier vos enfants et à ajouter un nouvel accessoire. De nombreux problèmes ont été signalés à propos de la perte de la référence par cloneWithProps, ce qui rend plus difficile de raisonner sur votre code. Maintenant, suivre le même modèle avec cloneElement fonctionnera comme prévu. Par exemple:
var newChildren = React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, { foo: true })
});
Remarque: React.cloneElement (enfant, {ref: 'newRef'}) REMPLACE la référence de sorte qu'il n'est toujours pas possible pour deux parents d'avoir une référence pour le même enfant, sauf si vous utilisez des références de rappel.
C'était une fonctionnalité essentielle pour entrer dans React 0.13 car les accessoires sont désormais immuables. Le chemin de mise à niveau consiste souvent à cloner l'élément, mais ce faisant, vous risquez de perdre la référence. Par conséquent, nous avions besoin d'un chemin de mise à niveau plus agréable ici. En améliorant les sites d'appels sur Facebook, nous avons réalisé que nous avions besoin de cette méthode. Nous avons reçu les mêmes commentaires de la communauté. Par conséquent, nous avons décidé de faire un autre RC avant la version finale pour nous assurer que nous obtenons cela.
Nous prévoyons de déprécier éventuellement React.addons.cloneWithProps. Nous ne le faisons pas encore, mais c'est une bonne occasion de commencer à réfléchir à vos propres utilisations et d'envisager d'utiliser React.cloneElement à la place. Nous veillerons à expédier une version avec des avis de dépréciation avant de la supprimer afin qu'aucune action immédiate ne soit nécessaire.
plus ici ...