Comment les composants React communiquent-ils entre eux ?

Communication entre les composants React

Dans React, la communication entre les composants devient importante lorsque vous devez mettre à jour les données d'un composant en fonction des modifications apportées à un autre. Il existe plusieurs façons d'aborder cela, en fonction de la relation entre les composants.

Communication parent-enfant

Lorsqu'un composant est imbriqué dans un autre, le composant enfant peut recevoir des accessoires du parent. Si le composant enfant doit mettre à jour le parent, il peut utiliser une fonction de rappel transmise comme accessoire.

// 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} />
    );
  }
}

Communication entre frères et sœurs

Lorsque les composants sont frères et sœurs, ils n'ont pas de relation directe parent-enfant. Dans de tels cas, vous pouvez utiliser un composant d'ordre supérieur (HOC) pour envelopper les deux composants et fournir un canal de communication.

// 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)} />
));

Système d'événements global

Lorsque les composants vivent dans des composants racine distincts , vous pouvez créer un émetteur d'événements global ou une solution de gestion d'état centralisée (par exemple, Redux) pour faciliter la communication. Les composants s'abonnent à des événements ou des actions spécifiques et réagissent en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!