维护组件内的状态(NextJS)

Question

我有一个NextJS应用程序有两个非常不同的布局取决于它是在横向还是纵向模式

我的父页面是有效的:

<NavWrapper> <MyPage> </NavWrapper>

NavWrapper组件负责纵向和横向布局，并将{children}传递给两个不同的组件。这些组件中的每一个都提供了布局和一个容器，实际的页面将在其中呈现。

size.isPortrait? 
<NavPortrait children={props.children}/> : 
<NavLandscape children={props.children}/>

没有问题，我有这个-内部'MyPage'我有一个showModal=useState()，我用它来显示弹出式模态。这工作得很好。但如果我旋转显示模态的屏幕，它就消失了。如果我旋转回来，它就消失了

我假设方向的改变会导致'MyPage'的一个新的实例，它的showModal状态显然是默认的'false'。

解决这个问题的最好方法是什么?我应该有一个更高级别的"模态"上下文吗?我应该记住"我的页码"吗?

Answer 1

您可能需要将showModal的状态存储在比MyPage更高的级别。你发布的代码示例表明你呈现一个全新的组件基于size.isPortrait的价值。你应该将重要状态存储在比条件组件更高的级别，然后将其传递给组件(通过React Context、props或其他方式)。

如果你的组件不共享任何类型的状态(或者如果他们不从单一来源继承他们的状态)，他们将总是独立地存储他们的状态。

const [showModal, setShouldShowModal] = useState(false);
return (
size.isPortrait
? 
<NavPortrait children={props.children} showModal={showModal} /> 
: 
<NavLandscape children={props.children} showModal={showModal} />
);