Wie vereinfacht die Property-Spread-Notation die Prop-Übergabe in React JSX?

Property-Spread-Notation in React JSX

React bietet eine prägnante Möglichkeit, Requisiten über die JSX-Syntax mithilfe der Property-Spread-Notation an Komponenten zu übergeben.

Was ist Property Spread Notation (...)?

Die drei Punkte oder ... im bereitgestellten Codeausschnitt stellen dar Notation der Eigenschaftsverteilung. Es ermöglicht Ihnen, die Eigenschaften eines Objekts in einzelne Eigenschaften auf dem Zielelement zu verteilen.

Wie funktioniert es?

Im Beispielcode:

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

the Die Spread-Notation {...this.props} verteilt alle aufzählbaren eigenen Eigenschaften von this.props als diskrete Eigenschaften auf dem Modal-Element. Dies entspricht dem Ausschreiben jeder Eigenschaft einzeln:

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

Allerdings schließt die Ausbreitungsnotation Eigenschaften basierend auf dem Objekt, das sie verteilt, dynamisch ein oder aus.

Einschließlich untergeordneter Elemente

Wenn das zu verteilende Objekt eine untergeordnete Eigenschaft enthält, wird diese in die Verteilungsnotation einbezogen. Dies liegt daran, dass „Children“ eine eigene Eigenschaft des Props-Objekts ist. Daher werden untergeordnete Elemente, die zwischen den öffnenden und schließenden Tags der Komponente platziert werden, als untergeordnete Eigenschaft an das Zielelement übergeben.

Um dies zu veranschaulichen, betrachten Sie das folgende Beispiel:

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

In diesem Fall erhält die Beispielkomponente die Requisiten „className“ und „Children“. Das Übergeben von Beispielelementen mit untergeordneten Elementen entspricht dem manuellen Festlegen der untergeordneten Requisite:

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

Durch die Nutzung der Eigenschaftsverteilungsnotation bietet React eine bequeme und dynamische Möglichkeit, mehrere Requisiten mit minimalem Overhead an Komponenten zu übergeben.

Das obige ist der detaillierte Inhalt vonWie vereinfacht die Property-Spread-Notation die Prop-Übergabe in React JSX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!