时间戳

首页 > 解决方案 > 在保持状态的同时在 React 中切换布局

javascript - 在保持状态的同时在 React 中切换布局

问题描述

我有一个用两种不同布局编写的小型 React Web 应用程序：一种用于桌面，另一种用于移动。我想将两者合二为一，根据窗口大小在布局之间切换。理想情况下，我会在应用程序的根目录有一个开关，如下所示：

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

大部分组件在两个布局之间重用，但也有少数组件依赖于状态，所以在布局之间切换会导致它们丢失。我可以重构布局，这样有状态的组件就不会有条件地呈现，但是有没有更好的方法来解决这个问题？

标签： javascriptreactjsresponsive-design

解决方案

我认为最简单的方法是在 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 />，您可以使用 props 以相同的方式<DesktopLayout />将从 down 接收到的 stets 传递给子组件。Root

推荐阅读