Wie kommunizieren Reaktionskomponenten miteinander?

Kommunikation zwischen React-Komponenten

In React wird die Komponentenkommunikation wichtig, wenn Sie Daten in einer Komponente basierend auf Änderungen in einer anderen aktualisieren müssen. Abhängig von der Beziehung zwischen den Komponenten gibt es mehrere Möglichkeiten, dies zu erreichen.

Eltern-Kind-Kommunikation

Wenn eine Komponente in einer anderen verschachtelt ist, kann die untergeordnete Komponente Requisiten von der übergeordneten Komponente erhalten. Wenn die untergeordnete Komponente die übergeordnete Komponente aktualisieren muss, kann sie eine als Requisite weitergegebene Rückruffunktion verwenden.

// Parent component
class Parent extends React.Component {
  handleFilterUpdate = (value) => {
    // Update the state to apply the filter.
    this.setState({ filter: value });
  };

  render() {
    return (
      <Child updateFilter={this.handleFilterUpdate} />
    );
  }
}

// Child component
class Child extends React.Component {
  handleFilterChange = () => {
    // Get the filter value and trigger the parent callback.
    const value = this.refs.filterInput.value;
    this.props.updateFilter(value);
  };

  render() {
    return (
      <input type="text" ref="filterInput" onChange={this.handleFilterChange} />
    );
  }
}

Geschwisterkommunikation

Wenn Komponenten Geschwister sind, haben sie keine direkte Eltern-Kind-Beziehung. In solchen Fällen können Sie eine Komponente höherer Ordnung (HOC) verwenden, um beide Komponenten zu umschließen und einen Kommunikationskanal bereitzustellen.

// HOC
const withFilter = (WrappedComponent) => {
  class Wrapper extends React.Component {
    constructor(props) {
      super(props);
      this.state = { filter: '' };
    }

    handleFilterUpdate = (value) => {
      this.setState({ filter: value });
    };

    render() {
      return (
        <WrappedComponent
          filter={this.state.filter}
          updateFilter={this.handleFilterUpdate}
        />
      );
    }
  }

  return Wrapper;
};

// Child components
const Component1 = withFilter(({ filter }) => <p>Filter: {filter}</p>);
const Component2 = withFilter(({ updateFilter }) => (
  <input type="text" onChange={(e) => updateFilter(e.target.value)} />
));

Globales Ereignissystem

Wenn Komponenten in separaten Stammkomponenten leben können Sie einen globalen Event-Emitter oder eine zentralisierte Zustandsverwaltungslösung (z. B. Redux) erstellen, um die Kommunikation zu erleichtern. Die Komponenten abonnieren bestimmte Ereignisse oder Aktionen und reagieren entsprechend.

Das obige ist der detaillierte Inhalt vonWie kommunizieren Reaktionskomponenten miteinander?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!