Un guide complet de props.children dans React

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 :

<Profile>
  <ProfileImage src="/asset/profile-img.png" />
  <ProfileDetails name="Antonello" surname="Zanini" />
</Profile>

Le composant Profile a deux enfants : ProfileImage et ProfileDetails, alors que ces deux 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 le 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 :

<ImageSlider>
  <img src="/assets/img-1.pg" />
  <img src="/assets/img-2.pg" />
  <img src="/assets/img-3.pg" />
</ImageSlider>

Comme vous pouvez le constater, ImageSlider est composé de plusieurs qui peut être consulté et rendu via props.children.

export default function ImageSlider(props) { 
    return (
      <div className="img-slider">
        {props.children}
      </div>
    );  
}

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 :

<MyComponent>
  { String(undefined) }
</MyComponent>

Pourquoi props.children est-il si important ?

props.children nous permet de composer des composants, et donc notre interface front-end par conséquent ; 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 (
    <div className="split-pane">
      <div className="left-pane">
        { left }      
      </div>
      <div className="right-pane">
        { right }      
      </div>
    </div>
  );
}

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 indé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

• pourEach

• compte

• uniquement

• toArray

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 (
    <div className="img-slider">
      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    </div>
  );
}

React.Children.map allows us to iterate over props.children and transform each element according to the function passed as the second parameter. To achieve our goal, we used React.cloneElement. This is because we needed to change the value of the className prop, but props are immutable in React, so we had to clone each child.

Conclusion

Mastering props.children is essential to becoming a great React developer and beginning to harness the full potential of the React component model. props.children is one of React's most useful features, since it gives us the ability to render child components. Because of this, every developer should know how to use it properly.

I hope this article helps you master composition in React.

The post "A Complete Guide To props.children In React" appeared first on Writech.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!