setState在分离的组件中

Question

所以我正在进行项目，发现了一个对我来说太复杂的问题。我需要使用这样的东西：

{this.state.isOpen && <MyComponent />}

但我想引用的状态是在hoc内部，让我们将其命名为AppHOC。AppHOC与一些组件一起工作，我需要通过点击图标在根目录中显示这些组件，但图标也是分开的，看起来像：

const Root = () => {
return(
{this.state.isOpen && <MyComponent />}
<Wrapper>
<Icon />
</Wrapper>
);
}

所以问题是：ApponClick必须设置AppHOC的state并接收AppHOC包含的函数之一，而根文件必须从AppHOC获取该状态。有可能吗？我可以用Redux吗？Redux是否像一个减速器一样使用HOC，但对每个生成的MyComponent都进行状态分离？我应该在这里使用HOC吗？

Answer 1

这是提升状态的常见情况。一个通用的父级应该承载该状态，在这种情况下它似乎是Root。

由于通过道具传递状态多个深度嵌套的组件可能很麻烦，它可以通过React上下文传递：

const OpenContext = React.createContext();
const Root = () => {
let [open, setOpen] = React.useState(false);
let openState = React.useMemo(() => [open, setOpen], [open]);
return(
<OpenContext.Provider value={openState}>
{open && <MyComponent />}
<Wrapper>
<Icon />
</Wrapper>
</OpenContext.Provider>
);
}

可以在具有上下文API的嵌套组件中访问状态：

let [open, setOpen] = React.useContext(OpenContext);

这是Redux可以解决的问题，但不是必需的。