Bagaimanakah Komponen Reaksi Berkomunikasi Antara Satu Sama Lain?

Berkomunikasi Antara Komponen React

Dalam React, komunikasi komponen menjadi penting apabila anda perlu mengemas kini data dalam satu komponen berdasarkan perubahan pada komponen lain. Terdapat beberapa cara untuk mendekati perkara ini, bergantung pada hubungan antara komponen.

Komunikasi Ibu Bapa-Anak

Apabila satu komponen bersarang dalam komponen yang lain, komponen anak boleh menerima prop daripada ibu bapa. Jika komponen anak perlu mengemas kini induk, ia boleh menggunakan fungsi panggil balik yang diturunkan sebagai prop.

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

Komunikasi Adik Beradik

Apabila komponen adalah adik beradik, mereka tidak mempunyai hubungan langsung ibu bapa-anak. Dalam kes sedemikian, anda boleh menggunakan komponen tertib tinggi (HOC) untuk membalut kedua-dua komponen dan menyediakan saluran komunikasi.

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

Sistem Acara Global

Apabila komponen hidup dalam komponen akar yang berasingan , anda boleh mencipta pemancar peristiwa global atau penyelesaian pengurusan keadaan terpusat (cth., Redux) untuk memudahkan komunikasi. Komponen melanggan acara atau tindakan tertentu dan bertindak balas dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah Komponen Reaksi Berkomunikasi Antara Satu Sama Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!