Was bedeutet "... this.props" in ReactJS?

Question

Was bedeutet {...this.props} in diesem Code?

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

Answer 1

Die {...variable} Syntax wird "Spread-Attribute" genannt.

Was dies tut, ist, im Grunde nimmt es jede Eigenschaft von this.props (oder jede andere übergebene Variable) und wendet sie auf das Element.

Beispiel:

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

ich denke, es könnte die Ausbreitung Operator (drei Punkte), die Sie off setzen? :)

What does the three dots in react do?

Edit: Um dies näher auszuführen, sind Sie wahrscheinlich zu einer JSX Vorlage suchen? Jede Eigenschaft ist tatsächlich eine CSS-Eigenschaft für Ihr -Format Attribut im resultierenden HTML. Der Spread-Operator bewirkt auch, dass alle Eigenschaften innerhalb von this.props expandiert werden, d. H. Das Gleiche, als ob jede Eigenschaft in this.props explizit in der Vorlage ausgegeben würde.

Answer 3

{... this.props} bedeutet alle Requisiten der aktuellen Komponente. Nehmen wir an, Sie haben Objekt a und Objekt b in Requisiten als {... this.props} bedeutet sowohl a als auch b. Sie können alle Requisiten Ihrer aktuellen Komponente an eine andere Komponente übergeben, indem Sie diese verwenden.