Que fait le '...' (Spread Syntax) dans React JSX ?

Notation de propagation de propriétés dans React

À quoi servent les trois points (...) dans le code JSX dans React ?

Les points dans ces cas représentent la notation de répartition des propriétés. Introduit dans ES2018, il est depuis longtemps pris en charge dans React via la transpilation.

La notation de répartition des propriétés vous permet de « répartir » les propriétés énumérables d'un objet dans les propriétés d'un autre. Dans le cas de React, la syntaxe {...this.props} répartit les propriétés de l'objet props sur l'élément Modal.

Par exemple, si this.props contient { a: 1, b: 2 }, le code suivant :

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

est équivalent à :

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

La notation de répartition des propriétés est dynamique, ce qui signifie qu'elle incluez toutes les propriétés présentes dans l'objet props au moment de l'exécution. Cela peut être utile pour transmettre plusieurs propriétés des composants parent aux composants enfants sans les déclarer explicitement.

Étant donné que les enfants sont également une propriété des accessoires, la notation de répartition des propriétés les inclura. Ainsi, tous les éléments enfants rendus entre les balises d'ouverture et de fermeture du composant parent seront transmis au composant enfant.

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!