Que signifie "...this.props" dans ReactJS ?

Question

Qu'est-ce que {...this.props} signifie dans ce code ?

<div {...this.props} style={{ height: `100%`, }}

Answer 1

En {...variable} La syntaxe est appelée "attributs étalés".

Ce que ça fait, c'est que, en gros, ça prend chaque propriété de this.props (ou toute autre variable passée) et les applique à l'élément.

Exemple :

props = {className: 'big', href: 'http://example.com'};

<a {...props} />
// the above line is equal to the following
<a className="big" href="http://example.com" />

Answer 2

Je pense que ça pourrait être le opérateur de diffusion (trois points) qui vous dérangent ? :)

Que font les trois points en réaction ?

Edit : Pour préciser, vous êtes probablement en train de regarder un modèle JSX ? Chaque propriété sera en fait une propriété CSS pour votre modèle JSX. style dans le HTML résultant. De plus, l'opérateur d'étalement fait en sorte que toutes les propriétés de l'attribut ce.props sont étendues, c'est-à-dire que c'est la même chose que si chaque propriété de l'application ce.props a été explicitement sortie dans le modèle.

Answer 3

{...this.props} signifie tous les props du composant actuel. Disons que vous avez l'objet a et l'objet b dans les props, alors {...this.props} signifie à la fois a et b. Vous pouvez passer tous les props de votre composant actuel à un autre composant en utilisant ceci.