React Academy · Leçon

Cloner et injecter des props avec cloneElement

Utiliser React.cloneElement pour transmettre des props masquées du parent aux composants enfants.

Cloner et injecter des props avec cloneElement est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous utiliserez React.cloneElement pour cloner un élément enfant et lui injecter des propriétés supplémentaires provenant du parent, sans que l'enfant ait besoin de les connaître.

Qu'est-ce que cloneElement ?

`React.cloneElement(element, props, ...children)` crée un nouvel élément React à partir d'un élément existant, en fusionnant les nouvelles propriétés avec les propriétés d'origine. Le type de l'élément d'origine est conservé.

const clone = React.cloneElement(child, { active: true });

Pourquoi utiliser cloneElement ?

Un composant parent peut injecter un comportement, comme un état actif ou des gestionnaires d'événements, dans ses enfants sans que ceux-ci le sachent. Cette technique est utilisée dans les systèmes d'onglets, les accordéons et les groupes de formulaires.

Exemple de barre d'onglets

Un composant Tabs peut cloner chaque enfant Tab et injecter automatiquement les propriétés `isActive` et `onClick`, afin que le consommateur n'ait pas besoin de les relier manuellement.

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Règles de fusion des propriétés

cloneElement fusionne les nouvelles propriétés **par-dessus** les propriétés d'origine. Si l'élément d'origine possède déjà une propriété portant la même clé, la nouvelle valeur l'emporte. style et className sont remplacés, et non fusionnés, sauf si vous gérez cela manuellement.

Fusionner les gestionnaires d'événements

Pour fusionner les gestionnaires d'événements plutôt que les remplacer, composez manuellement les fonctions de rappel avant de les transmettre à cloneElement.

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

Remplacer les enfants

Le troisième argument de `cloneElement` remplace les enfants de l'élément. Transmettez un nouveau contenu pour remplacer entièrement les enfants d'origine.

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

Vérifier le type de l'élément avant le clonage

Avant le clonage, vérifiez que l'enfant est un élément React valide et, si nécessaire, vérifiez son type afin d'éviter de cloner des enfants qui ne sont pas des éléments, comme du texte, des nombres ou null.

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement ou le contexte

cloneElement est fragile, car il nécessite de connaître la structure de l'enfant. Le contexte est généralement préférable pour transmettre des données implicites à travers plusieurs niveaux. Utilisez cloneElement uniquement pour injecter des propriétés directement du parent à l'enfant.

Alternative moderne : propriétés de rendu et hooks

Dans de nombreux cas où cloneElement était utilisé autrefois, un hook personnalisé ou une propriété de rendu est plus clair. Envisagez cloneElement lorsque vous contrôlez réellement à la fois le parent et ses enfants directs.

Question rapide

Qu'advient-il d'une propriété présente à la fois sur l'élément d'origine et dans l'objet de propriétés transmis à React.cloneElement ?

Récapitulatif

React.cloneElement clone un élément et lui injecte de nouvelles propriétés. Utilisez-le pour injecter implicitement des propriétés du parent vers l'enfant dans des composants composés. Préférez le contexte ou les propriétés de rendu lorsque la hiérarchie est plus profonde.

Cours terminé

Félicitations ! Vous avez terminé **API Children de React et modèle des emplacements**. Vous maîtrisez maintenant props.children, les utilitaires React.Children, les propriétés d'emplacements nommés et cloneElement pour créer des composants de mise en page flexibles.

Questions Fréquemment Posées

La leçon « Cloner et injecter des props avec cloneElement » est-elle gratuite ?

Oui — le texte complet de « Cloner et injecter des props avec cloneElement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Cloner et injecter des props avec cloneElement » ?

Utiliser React.cloneElement pour transmettre des props masquées du parent aux composants enfants. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Cloner et injecter des props avec cloneElement » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Principes fondamentaux de props.children
Utilitaires React.Children
Emplacements nommés via les props d’objet
Cloner et injecter des props avec cloneElement

← Retour à React Academy