在保持狀態的同時在 React 中切換布局

Question

我有一個用兩種不同布局編寫的小型 React Web 應用程序：一種用於桌面，一種用於移動設備。 我想將兩者合二為一，根據窗口大小在布局之間切換。 理想情況下，我會在應用程序的根目錄下有一個開關，如下所示：

const Root = () => {
  return isMobile ? <MobileLayout /> : <DesktopLayout />;
}

大部分組件在兩個布局之間重用，但是有少數組件依賴狀態，因此在布局之間切換會導致它們丟失狀態。 我可以重構布局，這樣有狀態的組件就不會有條件地呈現，但是有沒有更好的方法來解決這個問題？

Answer 1

我認為最簡單的方法是在 React 中提升狀態。 在布局切換期間應保留的所有狀態都應放置在Root組件中，並作為道具傳遞給<MobileLayout />和<DesktopLayout /> 。 如果需要從<MobileLayout />或<DesktopLayout />更新狀態，您可以使用回調。

例如

const Root = () => {
  const [someState, setSomeState] = useState({})
  return isMobile ? <MobileLayout someState={someState} setSomeState={setSomeState}/> : <DesktopLayout someState={someState} setSomeState={setSomeState}/>;
}

在<MobileLayout />和<DesktopLayout />您可以使用 props 以相同的方式將從Root接收到的 stets 傳遞給子組件。