Accessoires de réaction

Comment utiliser des accessoires pour transmettre des données autour de vos composants React

Props est la façon dont les composants obtiennent leurs propriétés. À partir du composant supérieur, chaque composant enfant obtient ses accessoires du parent. Dans un composant de fonction, les accessoires sont tout ce qu'il est passé, et ils sont disponibles en ajoutantpropscomme argument de fonction:

const BlogPostExcerpt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

Dans un composant de classe, les accessoires sont passés par défaut. Il n'est pas nécessaire d'ajouter quoi que ce soit de spécial, et ils sont accessibles en tant quethis.propsdans une instance de composant.

import React, { Component } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) } }

La transmission d'accessoires aux composants enfants est un excellent moyen de transmettre des valeurs dans votre application. Un composant contient des données (a un état) ou reçoit des données via ses accessoires.

Cela se complique quand:

  • vous devez accéder à l'état d'un composant à partir d'un enfant de plusieurs niveaux (tous les enfants précédents doivent agir en tant que pass-through, même s'ils n'ont pas besoin de connaître l'état, ce qui complique les choses)
  • vous devez accéder à l'état d'un composant à partir d'un composant totalement indépendant.

Valeurs par défaut pour les accessoires

Si aucune valeur n'est requise, nous devons lui spécifier une valeur par défaut si elle est manquante lors de l'initialisation du composant.

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

BlogPostExcerpt.defaultProps = { title: ‘’, description: ‘’ }

Certains outillages commeESLintont la capacité d'appliquer la définition des defaultProps pour un composant avec certains propTypes qui ne sont pas explicitement requis.

Comment les accessoires sont passés

Lors de l'initialisation d'un composant, transmettez les accessoires d'une manière similaire aux attributs HTML:

const desc = 'A description'
//...
<BlogPostExcerpt title="A blog post" description={desc} />

Nous avons passé le titre sous forme de chaîne simple (quelque chose que nous pouvonsseulfaire avec des chaînes!), et la description en tant que variable.

Enfants

Un accessoire spécial estchildren. Qui contient la valeur de tout ce qui est passé dans lebodydu composant, par exemple:

<BlogPostExcerpt title="A blog post" description="{desc}">
  Something
</BlogPostExcerpt>

Dans ce cas, à l'intérieurBlogPostExcerptnous pourrions accéder à "Quelque chose" en recherchantthis.props.children.

Alors que les accessoires permettent à un composant de recevoir des propriétés de son parent, d'être «chargé» d'imprimer certaines données par exemple, l'état permet à un composant de prendre vie lui-même et d'être indépendant de l'environnement environnant.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: