Wie übergebe ich Requisiten von untergeordneten Komponenten an übergeordnete Komponenten in React.js?

Übergabe von Requisiten an übergeordnete Komponenten in React.js

Beim Arbeiten mit Eltern-Kind-Beziehungen in React.js geschieht dies möglicherweise nicht sofort Es ist offensichtlich, wie die Requisiten einer untergeordneten Komponente an ihre übergeordnete Komponente übergeben werden. Es gibt jedoch einen unkomplizierten Ansatz, der es vermeidet, sich auf Ereignisse oder komplexe Konfigurationen zu verlassen.

Identifizierung des Problems

Das Problem tritt auf, wenn versucht wird, die Requisiten eines Kindes direkt an sein Kind weiterzugeben parent mithilfe von Ereignissen wie onClick. Der Versuch, über Ereignisse auf die Requisiten des Kindes zuzugreifen, wirft die Frage auf, warum ein solcher Ansatz notwendig wäre, da der Elternteil diese Requisiten bereits besitzt.

Ein einfacherer Ansatz

Eine effizientere Lösung besteht darin, die Tatsache zu nutzen, dass die Eltern bereits Zugriff auf die Requisiten ihres Kindes haben und diese zu verwenden direkt:

// Child component
render() {
  return <button onClick={this.props.onClick}>{this.props.text}</button>;
}

// Parent component (with single child)
render() {
  return <Child onClick={this.handleChildClick} text={this.state.childText} />;
}

// Parent component (with list of children)
render() {
  const children = this.state.childrenData.map(childData => {
    return <Child onClick={this.handleChildClick.bind(null, childData)} text={childData.childText} />;
  });

  return <div>{children}</div>;
}

Überkopplung vermeiden

Lösungen, bei denen die gesamte untergeordnete Komponente über onClick-Handler an die übergeordnete Komponente übergeben wird, sind nicht ratsam, da sie unnötige Kopplung einführen und Kompromisskapselung. Stattdessen ist es vorzuziehen, die Interaktion zwischen Komponenten auf ihre jeweiligen Schnittstellen zu beschränken.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten von untergeordneten Komponenten an übergeordnete Komponenten in React.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!