Passer des accessoires aux enfants dans React

1. Passer des props aux enfants dans React
2. Passer des accessoires aux enfants dans React à l’aide de l’API Context
3. Passer des accessoires aux enfants dans React à l’aide de React.cloneElement()

Les développeurs React s’appuient sur la réutilisation des composants pour créer des applications puissantes mais maintenables.

La bibliothèque de réaction comporte un modèle de composition, qui ajoute à la flexibilité d’utiliser des composants réutilisables. Dans certaines situations, vous ne pouvez pas prédire quels seront les enfants de vos composants.

Par exemple, lors de la création d’une application de messagerie, votre boîte de dialogue peut inclure des emojis ainsi qu’un morceau de texte.

React fournit une fonctionnalité props.children pour augmenter la réutilisation des composants. Pour le dire simplement, les développeurs React peuvent utiliser this.props.children pour afficher les valeurs (généralement des éléments d’interface utilisateur) placées entre les balises d’ouverture et de fermeture d’un composant parent.

Passer des props aux enfants dans React

Imaginons que vous ayez des éléments enfants que vous recevez via props.children. Pour les afficher, vous devez inclure props.children ou this.props.children (pour les composants de classe) dans votre déclaration return.

Voici un exemple avec trois composants : le composant parent App en haut et un composant Box avec un composant enfant Text. Nous allons jeter un coup d’oeil:

class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

class Box extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class Text extends Component {
  render() {
    return <p>Welcome to App</p>;
  }
}

Mais que se passe-t-il si vous devez transmettre des accessoires supplémentaires aux éléments ou composants inclus dans props.children ? Dans notre exemple, nous pourrions avoir besoin de spécifier une propriété color ou fontSize pour notre texte.

Explorons deux excellentes options pour ce faire.

Passer des accessoires aux enfants dans React à l’aide de l’API Context

Context vous permet de transmettre des accessoires à un arbre entier de composants. C’est extrêmement utile parce que vous avez un composant App en haut mais que vous souhaitez transmettre un gestionnaire d’événements à un composant enfant au bas de l’arborescence.

Vous pouvez le transmettre manuellement, mais ce sera long et difficile à suivre. Au lieu de cela, vous pouvez utiliser Context pour rendre la valeur disponible dans chaque composant enfant.

Techniquement, Context n’est pas la même chose que props, mais il fait le travail dans notre situation. Pour ce faire, nous allons utiliser la méthode React.createContext(), disponible dans toutes les applications React.

Tout d’abord, nous définissons une variable pour stocker une instance Context :

import React, { Component } from 'react';
import { render } from 'react-dom';
const SampleContext = React.createContext()
class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

Notez que la variable est créée en dehors de la portée des composants de classe.

Nous trouvons le composant qui affiche this.props.children et l’enveloppons avec un <SampleContext.Provider>. Tout ce qui se trouve entre les balises d’ouverture et de fermeture du wrapper aura accès aux valeurs que nous définissons.

Ensuite, nous spécifions la valeur :

class Box extends Component {
  render() {
    return <SampleContext.Provider value={{color: "red"}}>
          {this.props.children}
          </SampleContext.Provider>;
  }
}

Maintenant, nous allons au composant qui est transmis comme this.props.children et définissons la propriété contextType égale à la variable que nous avons initialement créée :

class Text extends Component {
  static contextType = SampleContext
  render() {
    return <p style={{color: this.context.color}}>Welcome to App</p>;
  }
}

Une fois que nous avons fait cela, nous pouvons accéder aux valeurs de Context. Dans ce cas, nous définissons un objet de style en ligne et définissons la propriété color sur this.context.color, rouge.

Le texte est bien rouge, comme on le voit dans le playcode. Vous pouvez essayer de modifier le code vous-même en ajoutant ou en supprimant des propriétés dans le Contexte et en voyant si cela fonctionne.

Passer des accessoires aux enfants dans React à l’aide de React.cloneElement()

Alternativement, vous pouvez également utiliser la méthode cloneElement() pour ajouter des accessoires personnalisés aux éléments ou composants de votre props.children. Regardons et digérons un exemple :

<>{React.cloneElement(props.children, {color: "red"})}</>

Dans notre exemple, la méthode prend deux arguments. Tout d’abord, il faut lui passer props.children, qu’il utilisera comme point de départ pour le clonage. Cela signifie que l’élément cloné aura tous les props de l’original.

La méthode cloneElement() préserve également les références, qui sont importantes lors de l’interaction avec DOM.

Comme deuxième argument, nous devons passer tous les props supplémentaires que nous voulons que le composant reçoive. Dans ce cas, nous allons passer une color avec la valeur "red".