J'ai développé avec React pendant des mois sans pleinement comprendre la véritable puissance du modèle de composant React. Un jour, j'ai décidé de me lancer dans la composition, et c'est ce que j'ai appris.

Composants de réaction et enfants

Dans React, un composant peut avoir un, plusieurs ou aucun enfant. Super, mais attendez — que sont les « enfants » ? Expliquons avec un exemple :

Le composant Profile a deux enfants : ProfileImage et ProfileDetails, alors que ces deux-là n'ont pas d'enfants.

"Dans les expressions JSX qui contiennent à la fois une balise d'ouverture et une balise de fermeture, le contenu entre ces balises est transmis en tant qu'accessoire spécial : props.children" — Documentation React

Essentiellement, props.children est un accessoire spécial, automatiquement transmis à chaque composant, qui peut être utilisé pour restituer le contenu inclus entre les balises d'ouverture et de fermeture lors de l'appel d'un composant. Ces types de composants sont identifiés par la documentation officielle sous le nom de « boîtes ».

Identifier les composants par la syntaxe JSX

Dans JSX de React, un composant avec des enfants est toujours identifié par une balise d'ouverture et une balise de fermeture. Chaque enfant doit être placé entre ces deux balises, comme nous l'avons vu plus haut. Lorsqu'un composant n'a pas d'enfant, vous pouvez l'appeler avec ou , mais cette dernière syntaxe est généralement préférée. Le but des balises à fermeture automatique est de rendre le code plus court et plus facile à lire.

props.children dans Actions

Supposons que nous souhaitions créer un composant ImageSlider. Notre objectif est d'invoquer le composant comme ceci :

Comme vous pouvez le voir, ImageSlider est composé de plusieurs accessibles et rendus via props.children.

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

Grâce à props.children nous pouvons imbriquer notre contenu dans un composant, tout comme nous imbriquons des éléments HTML courants.

Quels types de contenu sont autorisés pour props.children ?

Le contenu transmis à un composant via props.children peut inclure

undefined, null, un booléen, un nombre, une chaîne, un élément React ou un tableau de l'un de ces types de manière récursive. Il peut également s'agir d'une fonction renvoyant l'un de ces types.

Veuillez noter que, comme mentionné dans la documentation React, false, null, undefined et true sont des enfants valides, mais ils seront ignorés et ne seront pas rendus. Si vous souhaitez que faux, vrai, nul ou indéfini soit rendu, vous devez d'abord le convertir en chaîne :

  { String(undefined) }

Pourquoi props.children est-il si important ?

props.children nous permet de composer des composants, et donc notre interface front-end en conséquence ; exploiter la véritable puissance du modèle de composant React.

"React dispose d'un modèle de composition puissant, et nous recommandons d'utiliser la composition au lieu de l'héritage pour réutiliser le code entre les composants." — Documentation React

Comme indiqué dans la documentation officielle, vous devrez parfois combler plusieurs "trous" dans un composant. Dans de tels cas, au lieu d'utiliser props.children, définir plusieurs accessoires personnalisés peut être l'approche préférable ; comme le montre l'exemple suivant :

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

Réagir.Enfants

"React.Children fournit des utilitaires pour gérer la structure de données opaque props.children" — Documentation React

Pourquoi props.children est-il une « structure de données opaque » ?

Parce que props.children peut être constitué de un, plusieurs ou aucun élément enfant, ce qui signifie que sa valeur peut être un seul nœud enfant, un tableau de nœuds enfants ou non défini respectivement. Grâce à l'API React.Children, nous pouvons facilement gérer props.children sans prendre en compte chacun de ses types possibles. Heureusement, tout sera géré pour nous en arrière-plan.

Au moment de la rédaction, React.Children propose cinq utilitaires différents :

• carte

• pour chaque

• compter

• seulement

• versArray

Voyons comment nous pouvons utiliser React.Children avec un exemple. Disons que nous souhaitons ajouter la classe CSS spéciale img-special-class à chacun des enfants du composant ImageSlider. Cela peut être fait comme suit:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map nous permet de parcourir props.children et de transformer chaque élément en fonction de la fonction passée en deuxième paramètre. Pour atteindre notre objectif, nous avons utilisé React.cloneElement. En effet, nous devions modifier la valeur de la prop className, mais les props sont immuables dans React, nous avons donc dû cloner chaque enfant.

Conclusion

Maîtriser props.children est essentiel pour devenir un excellent développeur React et commencer à exploiter tout le potentiel du modèle de composant React. props.children est l'une des fonctionnalités les plus utiles de React, car elle nous donne la possibilité de restituer des composants enfants. Pour cette raison, chaque développeur doit savoir comment l'utiliser correctement.

J'espère que cet article vous aidera à maîtriser la composition dans React.

Le message "Un guide complet de props.children In React" est apparu en premier sur Writech.