Utilisation de React.cloneElement () dans JSX

Question

Je veux savoir comment utiliser la syntaxe cloneElement dans JSX. J'ai lu des documents et essayé des exemples, mais je n'ai toujours aucune idée.

class ABC extends React.Component {
  constructor(props){
    super(props)
}
render() {
  return(
  <div>
    {React.cloneElement()}
  </div>
  )
}
}

Answer 1

Selon la documentation:

Clonez et renvoyez un nouvel élément React utilisant l'élément comme point de départ. L'élément résultant aura les accessoires de l'élément d'origine avec les nouveaux accessoires fusionnés de manière superficielle. Les nouveaux enfants remplaceront les enfants existants. Key and ref de l'élément d'origine sera conservé.

Un cas d'utilisation valide pour cloneElement est lorsque vous souhaitez ajouter un ou plusieurs accessoires aux éléments passés par un enfant par le parent.Vous devez simplement mapper tous les enfants et les cloner en ajoutant de nouveaux accessoires par exemple.

return (
  <div style={styles}>
    {React.Children.map(children, child => {
      console.log(child);
      return React.cloneElement(child, {newProp}, null);
    })}
  </div>
)

Cochez un démo de travail