Wie übergebe ich Requisiten von einer untergeordneten an eine übergeordnete Komponente in React.js, ohne das gesamte untergeordnete Element zurückzugeben?

So übergeben Sie Requisiten von einer untergeordneten an eine übergeordnete Komponente in React.js mithilfe von Ereignissen

In React.js gibt es verschiedene Ansätze zum Übergeben von Daten von einer untergeordneten Komponente zu seinem Elternteil. Obwohl Event-Handler oft praktisch sind, ist es wichtig, die Best Practices und potenziellen Fallstricke zu verstehen.

Warum wir die gesamte untergeordnete Komponente nicht zurückgeben

Andere Lösungen für Dieses Problem kann darauf hindeuten, dass die gesamte untergeordnete Komponente über den Ereignishandler an die übergeordnete Komponente zurückgegeben wird. Dieser Ansatz wird jedoch im Allgemeinen nicht empfohlen, weil:

• Duplizierung von Requisiten: Der Elternteil verfügt bereits über die Requisiten, die an das Kind weitergegeben werden, sodass es nicht notwendig ist, sie zurückzugeben.
• Kopplung und Kapselung: Eine enge Kopplung von Eltern und Kind auf diese Weise kann zu Wartungs- und Refactoring-Problemen führen.

Bessere Implementierung

Stattdessen sollten Sie die Tatsache nutzen, dass die Eltern bereits über die Requisiten verfügen, die das Kind braucht.

Kind:

var Child = React.createClass({
  render: function() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

Elternteil (einzelnes Kind):

var Parent = React.createClass({
  getInitialState: function() {
    return { childText: "Click me! (parent prop)" };
  },
  render: function() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  },
  handleChildClick: function(event) {
    // Access the props passed to the child
    alert("The Child button text is: " + this.state.childText);
    // Access the click target
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

Elternteil (mehrere Kinder):

var Parent = React.createClass({
  getInitialState: function() {
    return {
      childrenData: [
        { childText: "Click me 1!", childNumber: 1 },
        { childText: "Click me 2!", childNumber: 2 },
      ],
    };
  },
  render: function() {
    const children = this.state.childrenData.map(
      (childData, childIndex) => {
        return (
          <Child
            onClick={this.handleChildClick.bind(null, childData)}
            text={childData.childText}
            key={childIndex}  // Added key for each child component
          />
        );
      }
    );
    return <div>{children}</div>;
  },
  handleChildClick: function(childData, event) {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

In diesen Beispielen hat das Elternteil Zugriff auf die Requisiten und klicken Sie auf das Ziel der untergeordneten Komponente, ohne dass das gesamte untergeordnete Element zurückgegeben werden muss.

ES6-Update

Für die ES6-Syntax würde der Code so aussehen:

Kind:

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

Elternteil (einzelnes Kind):

class Parent extends React.Component {
  state = { childText: "Click me! (parent prop)" };
  handleChildClick = (event) => {
    alert("The Child button text is: " + this.state.childText);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  }
}

Elternteil (mehrere Kinder) :

class Parent extends React.Component {
  state = {
    childrenData: [
      { childText: "Click me 1!", childNumber: 1 },
      { childText: "Click me 2!", childNumber: 2 },
    ],
  };
  handleChildClick = (childData, event) => {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    const children = this.state.childrenData.map((childData, childIndex) => (
      <Child key={childIndex} text={childData.childText} onClick={(e) => this.handleChildClick(childData, e)} />
    ));
    return <div>{children}</div>;
  }
}

Diese Lösungen ermöglichen eine bessere Kapselung und Wartung und bieten gleichzeitig Flexibilität bei der Weitergabe der erforderlichen Informationen von der untergeordneten an die übergeordnete Komponente.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten von einer untergeordneten an eine übergeordnete Komponente in React.js, ohne das gesamte untergeordnete Element zurückzugeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!