Comment la notation de répartition de propriétés simplifie-t-elle le passage d'accessoires dans React JSX ?

Notation de répartition de propriétés dans React JSX

React offre un moyen concis de transmettre des accessoires aux composants via la syntaxe JSX à l'aide de la notation de répartition de propriétés.

Qu'est-ce que Notation de répartition des propriétés (...) ?

Les trois points, ou ..., dans l'extrait de code fourni représentent la répartition des propriétés notation. Il permet de répartir les propriétés d'un objet en propriétés individuelles sur l'élément cible.

Comment ça marche ?

Dans l'exemple de code :

<Modal {...this.props} title='Modal heading' animation={false}>

le La notation répartie {...this.props} répartit toutes les propriétés propres énumérables de this.props en tant que propriétés discrètes sur l'élément Modal. Cela équivaut à écrire chaque propriété individuellement :

<Modal a={this.props.a} b={this.props.b} c={this.props.c} ... title='Modal heading' animation={false}>

Cependant, la notation spread inclut ou exclut dynamiquement les propriétés en fonction de l'objet qu'elle propage.

Inclure les éléments enfants

Si l'objet en cours de propagation contient une propriété enfants, elle sera incluse dans la notation de propagation. En effet, children est une propriété propre de l'objet props. Par conséquent, les éléments enfants placés entre les balises d'ouverture et de fermeture du composant seront transmis à l'élément cible en tant que propriété enfants.

Pour démontrer cela, considérons l'exemple suivant :

class Example extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        {this.props.children}
      </div>
    );
  }
}

Dans ce cas, le composant Exemple reçoit les accessoires className et children. Passer des éléments d'exemple avec des éléments enfants équivaut à définir manuellement les accessoires enfants :

ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

En tirant parti de la notation de répartition des propriétés, React fournit un moyen pratique et dynamique de transmettre plusieurs accessoires aux composants avec une surcharge minimale.

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!