Wie übergebe ich Requisiten vom Kind zum Elternteil in React.js?

Übergabe von Requisiten an die übergeordnete Komponente in React.js

Können wir die Requisiten eines untergeordneten Elements nicht mithilfe von Ereignissen an seine übergeordnete Komponente senden? React.js?

Obwohl es andere Lösungen gibt, übersehen diese oft einen grundlegenden Punkt. Eltern besitzen bereits die Requisiten, die sie an ihre Kinder weitergeben. Es besteht also keine Notwendigkeit, dass Kinder diese Requisiten an ihre Eltern zurückschicken.

Besserer Ansatz

Kind:
Die Kinderkomponente ist einfach gehalten.

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

Eltern (Single Kind):
Unter Verwendung der Requisite, die es an das Kind sendet, verarbeitet das Elternteil das Klickereignis.

const Parent = ({ childText }) => {
  const handleClick = (event) => {
    // Parent already has the child prop.
    alert(`Child button text: ${childText}`);
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return <Child text={childText} onClick={handleClick} />;
};

Elternteil (Liste der Kinder):
Der Elternteil verwaltet mehrere Kinder, ohne den Zugriff auf notwendige Informationen zu verlieren.

const Parent = ({ childrenData }) => {
  const handleClick = (childData, event) => {
    alert(
      `Child button data: ${childData.childText} - ${childData.childNumber}`
    );
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData, index) => (
        <Child
          key={index}
          text={childData.childText}
          onClick={e => handleClick(childData, e)}
        />
      ))}
    </div>
  );
};

Diese Strategie respektiert die Kapselung und reduziert die Kopplung durch Vermeidung Vertrauen auf die innere Struktur des Kindes.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten vom Kind zum Elternteil in React.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!