Verwenden Sie den Spread-Operator, um alle Requisiten in React zu übergeben

Webentwickler lieben React, weil es ihnen ermöglicht, eine wiederverwendbare Komponente zu erstellen und unnötiges Schreiben von Code zu vermeiden. Die Wiederverwendung von Komponenten bedeutet jedoch nicht nur, einen Variablennamen einzufügen, der ein bestimmtes Element speichert, um Wiederholungen zu vermeiden.

Das Komponentensystem in React ist fortschrittlich und ermöglicht es Ihnen, den inneren Inhalt, das Erscheinungsbild und sogar die Funktionalität von untergeordneten Komponenten anzupassen. Dies ist dank des Objekts props möglich, das verwendet wird, um Werte von Eltern an Kinder weiterzugeben.

Dieser Artikel beschreibt, wie man alle props an untergeordnete Komponenten weitergibt und eine unvorhersehbare Anzahl von Werten handhabt, die durch props innerhalb von untergeordneten Komponenten weitergegeben werden.

Verwenden Sie den Operator Spread (...), um alle Requisiten zu übergeben

Die spread-Syntax ist ein neues Feature in JavaScript. Es hat eine andere Funktionalität, wenn es mit Arrays, Strings und Objekten verwendet wird. In diesem Fall verwenden wir das Objekt props, um Werte vom Elternteil an das Kind weiterzugeben.

Die spread-Syntax ist einfach. Stellen wir uns vor, Sie haben ein Objekt mit mehreren Eigenschaften:

const obj {
    propertyOne: 1,
    propertyTwo: 2,
    propertyThree: 3,
    propertyFour: 4
}

Sie können alle Schlüssel-Wert-Paare in ein anderes Objekt kopieren, indem Sie drei Punkte (...) verwenden:

const copy = {...obj}

Bei Verwendung von props speichert das props-Objekt alle Eigenschaften, die Sie manuell weitergeben möchten. Wenn Sie ein separates props-Objekt haben, können Sie einfach die gleiche spread-Syntax verwenden, um alle Werte des bestehenden Objekts zu kopieren und weiterzugeben.

Sehen wir uns ein Beispiel unten an:

export default function App() {
  const props = { firstName: "Irakli", lastName: "Tchigladze" };
  return (
    <div className="App">
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

Auf diese Weise müssen wir die Attribute für die Komponente <Hello> nicht einzeln festlegen. Stattdessen werden alle Eigenschaften des Objekts props in der untergeordneten Komponente verfügbar gemacht. Sehen Sie sich beispielsweise die Ausgabe für den obigen Codezaun unten an.

Ausgang:

Hello, Irakli Tchigladze

Übergeben Sie alle Requisiten bis auf eine

Sie können auch einige Werte des props-Objekts weitergeben, aber ein oder zwei Eigenschaften ausschließen.

export default function App() {
  const props = { size: 20, firstName: "Irakli", lastName: "Tchigladze" };
  const { size, ...other } = props;
  return (
    <div className="App" style={{ fontSize: size }}>
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

In diesem Beispiel hat unser props-Objekt drei Eigenschaften – size, firstName und lastName.

Wir verwenden Destrukturierung, um die Eigenschaft Größe sicher zu verwenden, um unsere Elemente zu gestalten (geben Sie die Schriftgröße an). Aber wir können den Rest der Eigenschaften immer noch an die Komponente <Child> weitergeben.