Que fait le '...' (syntaxe Spread) dans les propriétés des composants React ?

Comprendre l'objectif des trois points dans React

Lorsque vous travaillez avec React, vous pouvez rencontrer les trois points (...), connue sous le nom de notation de propagation de propriété. Dans cet extrait :

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

Le "..." effectue la répartition des propriétés, extrayant les propriétés énumérables de this.props et les distribuant en tant que propriétés individuelles sur l'élément Modal.

Par exemple , si this.props contient { a: 1, b: 2 }, alors le code ci-dessus est analogue à :

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

Indépendamment du contenu exact de this.props, la notation spread garantit que toutes les propriétés « propres » qu'il contient sont incluses.

En particulier, les enfants sont considérés comme un « propre » propriété, elle sera donc également transmise au composant Modal. Ce mécanisme permet aux éléments enfants d'être nichés entre les balises d'ouverture et de fermeture du composant parent, ce qui est une syntaxe courante et utile pour inclure des enfants.

Pour illustrer :

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

Dans ceci exemple, l'exemple accepte className et les enfants comme accessoires. Les composants enfants ou les éléments placés dans l'exemple seront attribués à l'accessoire enfants.

En fin de compte, la notation de répartition des propriétés dans React offre une méthode pratique pour propager les propriétés d'un composant parent à ses enfants, rationalisant et simplifiant la base de code.

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!