Wie übergebe ich in React.js untergeordnete Requisiten an übergeordnete Elemente?

Übergabe untergeordneter Requisiten an übergeordnete Elemente in React.js

Kontext

React bietet über Requisiten einen leistungsstarken Kommunikationsmechanismus zwischen übergeordneten und untergeordneten Komponenten. Es kann jedoch Situationen geben, in denen Sie die gesamte untergeordnete Komponente zusammen mit ihren Requisiten an die übergeordnete Komponente übergeben möchten. Dies kann in Szenarien nützlich sein, in denen Sie komplexe Logik innerhalb des untergeordneten Elements kapseln und eine einfachere Schnittstelle zum übergeordneten Element bereitstellen möchten.

Bedenken hinsichtlich der Weitergabe von Props von Kind zu Eltern

In der Vergangenheit gab es einige Entwickler haben vorgeschlagen, Ereignisse zu verwenden, um untergeordnete Requisiten an das übergeordnete Element zu übergeben. Dieser Ansatz wirft jedoch Bedenken hinsichtlich der Kopplung und Kapselung auf. Der Zugriff auf die Requisiten und Implementierungsdetails der untergeordneten Komponente direkt innerhalb der übergeordneten Komponente kann die Komponenten eng miteinander verknüpfen und Refactoring-Bemühungen behindern.

Empfohlener Ansatz

Stattdessen wird empfohlen, für den Zugriff den vorhandenen Mechanismus der übergeordneten Requisiten zu nutzen die Daten des Kindes. Dies ermöglicht es dem Elternteil, die Requisiten zu nutzen, die es dem Kind zur Verfügung stellt, und vermeidet die Notwendigkeit, die Requisiten des Kindes aus dem Kind selbst abzurufen.

Implementierung mithilfe von Klassenkomponenten

Untergeordnete Komponente:

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

Elternteil Komponente:

class Parent extends Component {
  getInitialState() {
    return { childText: "Click me! (parent prop)" };
  }

  render() {
    return (
      <Child
        onClick={this.handleChildClick}
        text={this.state.childText}
      />
    );
  }

  handleChildClick(event) {
    const childText = this.state.childText;

    // Parent has access to child prop
    alert(`The Child button text is: ${childText}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  }
}

Implementierung mithilfe funktionaler Komponenten

Untergeordnete Komponente:

const Child = ({ onClick, text }) => {
  return <button onClick={onClick}>{text}</button>;
};

Übergeordnete Komponente:

const Parent = ({ childrenData }) => {
  const handleChildClick = (childData, event) => {
    const childText = childData.childText;
    const childNumber = childData.childNumber;

    // Parent has access to child prop
    alert(`The Child button data is: ${childText} - ${childNumber}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData) => (
        <Child
          key={childData.childNumber}
          onClick={(event) => handleChildClick(childData, event)}
          text={childData.childText}
        />
      ))}
    </div>
  );
};

Fazit

Durch Umarmen Mit dem vorhandenen Prop-Mechanismus in React können Sie Daten effektiv zwischen übergeordneten und untergeordneten Komponenten übergeben, ohne unnötige Kopplung einzuführen oder Kapselungsprinzipien zu verletzen. Dieser Ansatz stellt sicher, dass die Komponenten unabhängig und flexibel bleiben, was einen saubereren und wartbareren Code ermöglicht.

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