Hantar data antara tab dalam React.

Dalam artikel ini akan melihat cara menghantar data antara komponen dalam React secara global, walaupun dalam tab penyemak imbas yang berbeza.

cerita

Bayangkan anda mempunyai senarai item, seperti pengguna.

Setiap pengguna boleh dibuka dalam tetingkap modal untuk pengubahsuaian.

Anda tidak mempunyai sebarang langganan ke bahagian belakang, yang bermaksud bahawa senarai pengguna tidak akan disegerakkan secara automatik dengan bahagian belakang jika mana-mana pengguna berubah.

Jadi, sebaik sahaja profil pengguna dikemas kini, anda mahu memuat semula senarai pengguna secara automatik di bawah tetingkap modal (walaupun dalam semua tab lain tapak web anda).

Apakah yang akan kami lakukan untuk menyegerakkan data dalam komponen dan tab yang tidak berkaitan ini?

Penyelesaian

Tetingkap modal dan senarai pengguna sepatutnya boleh bertukar-tukar acara dan data.

Oleh itu, jika tindakan dilakukan dalam tetingkap modal, acara itu hendaklah dihantar kepada semua komponen yang menunggu tindakan jenis ini (cth. senarai pengguna), supaya mereka boleh bertindak balas terhadap acara ini, contohnya, dengan menyegerakkan data.

Mari kita sediakan komunikasi sedemikian antara komponen "UserList" dan "UserProfileModal" dengan menggunakan pakej kecil use-app-events:

const UserProfileModal = () => {
  // retrieve a user ID from URL, for example
  const { userId } = useParams();

  // 1. Create an instance of useAppEvents
  const { notifyEventListeners } = useAppEvents();

  const submitUpdate = async () => {
    // send a request to BE here, await the response...

    // 2. Send an event containing the updated user ID to
    // all other components that are listening for it
    notifyEventListeners('user-update', userId);
  };

  return <button onClick={submitUpdate}>Save changes</button>;
};

? Tetingkap modal

? Senarai pengguna

const UserList = () => {
  const [users, setUsers] = useState([]);

  // 1. Create an instance of useAppEvents
  const { listenForEvents } = useAppEvents();

  // 2. Listen and wait for the 'user-update' event to happen in the app
  listenForEvents('user-update', (userId) => {
    // 3. React to the occurred event by loading the refreshed
    // list of users from BE here...
  });

  return users.map((user) => (
    // render users here...
  ));
};

use-app-events ialah pakej sumber terbuka kecil tanpa kebergantungan dan risiko, ia juga diselenggara secara aktif dan selamat untuk digunakan.

Pada ketika ini, kemas kini profil pengguna dalam UserProfileModal secara automatik akan memberitahu semua pendengar seperti UserList, yang akan mencetuskan penyegaran semula senarai pengguna dalam UserList, menghasilkan UX yang lebih baik.

Tidak kira di mana UserList dan UserProfileModal diletakkan dalam pepohon komponen, mereka masih boleh menghantar data antara satu sama lain, walaupun dalam tab penyemak imbas yang berbeza.

Kesimpulan

Jika anda perlu menyediakan komunikasi global dengan mudah untuk bertukar-tukar data antara komponen - gunakan pakej use-app-events.

Ia menyediakan API yang mudah digunakan, dokumentasi yang luas dan penaipan yang ketat untuk memastikan anda mendapat pengalaman pembangun yang terbaik.

Atas ialah kandungan terperinci Hantar data antara tab dalam React.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!