Quand devrais-je utiliser React.cloneElement vs this.props.children?

Je suis toujours un noob chez React et dans de nombreux exemples sur internet, je vois cette variation dans le rendu des éléments enfants que je trouve déroutant. Normalement je vois ceci:

class Users extends React.Component { render() { return ( 

Users

{this.props.children}
) } }

Mais alors je vois un exemple comme ceci:

  {React.cloneElement(this.props.children, { key: this.props.location.pathname })}  

Maintenant, je comprends l’API, mais les documents ne précisent pas exactement quand je devrais l’utiliser.

Alors, que fait-on que l’autre ne peut pas? Quelqu’un pourrait-il m’expliquer cela avec de meilleurs exemples?

Tout d’abord, l’exemple React.cloneElement ne fonctionne que si votre enfant est un seul élément React.

Pour presque tout {this.props.children} est celui que vous voulez. Le clonage est utile dans certains scénarios plus avancés, où un parent envoie un élément et le composant enfant doit modifier certains éléments sur cet élément ou append des éléments tels que ref pour accéder à l’élément DOM réel.

Dans l’exemple ci-dessus, le parent qui donne à l’enfant ne connaît pas l’exigence de clé pour le composant, par conséquent il crée une copie de l’élément qui lui est donné et ajoute une clé basée sur un identifiant unique dans l’object. Pour plus d’informations sur la clé: https://facebook.github.io/react/docs/multiple-components.html

Fondamentalement, chaque fois que vous avez besoin de modifier dynamicment les accessoires de l’élément enfant dans la fonction de rendu.

Depuis return this.props.children ne fait que rendre les noeuds de réaction. Cependant, nous voulons parfois encapsuler plus de logique dans les éléments enfants, par exemple, react-router ou composant composé , mais

Les éléments de réaction sont immuables.

pour les problèmes de performance, nous devons donc utiliser cloneElements qui équivaut presque à:

{children}

props.children n’est pas le véritable enfant; C’est le descriptor des enfants. Donc, vous n’avez rien à changer. vous ne pouvez modifier aucun accessoire, ni modifier aucune fonctionnalité; vous ne pouvez en read from it que Si vous devez apporter des modifications, vous devez créer de new elements utilisant React.CloneElement .

https://egghead.io/lessons/react-use-react-cloneelement-to-extend-functionality-of-children-components

Un exemple:

fonction de rendu principale d’un composant tel que App.js :

 render() { return(  First Second Third  ) } 

Maintenant, disons que vous devez append un onClick à chaque enfant du Paragraph ; ainsi dans votre Paragraph.js vous pouvez faire:

 render() { return ( 
{React.Children.map(this.props.children, child => { return React.cloneElement(child, { onClick: this.props.onClick }) })}
) }

alors tout simplement vous pouvez le faire:

 render() { return(  First Second Third  ) } 

Note: la fonction React.Children.map ne verra que les éléments de top level , il ne voit aucune des choses que ces éléments ont rendues; ce qui signifie que vous fournissez les accessoires directs aux enfants (ici les éléments ). Si vous avez besoin que les accessoires soient transmis plus loin, supposons que vous ayez un

dans l’un des éléments qui veut utiliser l’application onClick Dans ce cas, vous pouvez utiliser l’ Context API pour le faire. Rendre le Paragraph les éléments fournisseur et Sentence tant que consommateur.