React TypeScript：在应用程序中切换选项卡时防止组件重新启动

Question

我正在开发一个 React TypeScript 应用程序，在其中实现了选项卡式内容，类似于浏览器。每个选项卡都包含一个组件，我遇到了一个问题，切换选项卡会导致组件重新启动，从而导致表单、打开模式等中的数据丢失。这些组件存储在对象列表中。如何确保切换选项卡不会导致组件重新启动，从而保留其中的数据？

---

这是我迄今为止尝试过的：

• 最初，我将组件直接存储在对象数组中，并根据活动选项卡索引渲染它们。
• 我还尝试了 React Router 和条件渲染，但无法阻止切换选项卡时组件重新初始化。

interface MainContentTab {
  id: string;
  title: string;
  content: JSX.Element;
  history: JSX.Element[];
  icon?: JSX.Element;
  state?: any;
}

...

export const useTabs = () => {
  return useContext(TabsContext);
};

export const TabsProvider = ({ children }: { children: ReactNode }) => {
  const [tabs, setTabs] = useState<MainContentTab[]>([]);
  const [activeTab, setActiveTab] = useState<string>("");
  ...
  return (
    <TabsContext.Provider value={{ tabs, addTab, ... }}> {children} </TabsContext.Provider>
  );
};

const MainContentTabs = () => {
  return (<>
    {contextMenuPos && (
      <TabsContextMenu 
        tabId={contextMenuTabId} 
        x={contextMenuPos.x} 
        y={contextMenuPos.y} 
        onClose={handleCloseContextMenu} />
    )} 
  </>);
};

我所期待的：

• 我希望组件在切换选项卡时保留其状态并且不会重新初始化，类似于浏览器保留打开选项卡状态的方式。

Answer 1

如果组件不再被渲染，它将被销毁。如果您再次渲染它，它将被重新创建。

所以你正在渲染这样的选项卡：

{ selectedTab === 'a' && <MyTabA /> }
{ selectedTab === 'b' && <MyTabB /> }

然后当

selectedTab

变为

'a'

时，

<MyTabA />

组件就会被创建并渲染。当它变成

'b'

时，组件及其所有状态都被销毁。

---

因此，您想要渲染所有您的选项卡，但只是隐藏它们的显示。

<div style={{ display: selectedTab === 'a' ? 'block' : 'none'><MyTabA /></div>
<div style={{ display: selectedTab === 'b' ? 'block' : 'none'><MyTabB /></div>

现在它们都同时存在，并且都同时渲染，但您一次只能显示一个。

这样，当您切换选项卡时，组件就不会被破坏。