在 React 中的選項卡之間發送資料。-js教程-PHP中文網

在 React 中的選項卡之間發送資料。

DDD

發布： 2024-09-14 06:23:32

原創

1182 人瀏覽過

Send data between tabs in React.

本文將介紹如何在 React 全域元件之間傳送數據，甚至在不同的瀏覽器標籤中也是如此。

故事

想像您有一個項目列表，例如用戶。

每個使用者都可以在模態視窗中開啟進行修改。

您沒有任何後端訂閱，這表示如果使用者發生變化，使用者清單不會自動與後端同步。

因此，一旦使用者的個人資料更新，您希望自動刷新模式視窗下的使用者清單（甚至在網站的所有其他標籤中）。

我們將如何同步這些不相關的元件和標籤中的資料？

解決方案

模態視窗和使用者清單應該能夠交換事件和資料。

因此，如果在模態視窗中執行操作，則應將事件傳送到等待此類操作的所有元件（例如使用者清單），以便它們可以對此事件做出反應，例如，正在同步資料。

讓我們使用一個小套件 use-app-events 在「UserList」和「UserProfileModal」元件之間建立這樣的通訊：

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

登入後複製

？ 模態視窗

？ 使用者列表

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

登入後複製