时间戳

首页 > 解决方案 > 分离组件中的 setState

javascript - 分离组件中的 setState

问题描述

所以我在我的项目中间，我发现了一个对我来说太复杂的问题。我需要像这样使用某物：

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

但是我要提到的状态是在 hoc 内部，我们将其命名为 AppHOC。AppHOC 适用于我需要通过单击在 Root 中显示的一些组件，但 Icon 也是分开的，它看起来像：

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

所以问题是：App onClick 必须设置 AppHOC 的状态并接收 AppHOC 包含的功能之一，并且根文件必须从 AppHOC 获取该状态。可能吗？我可以使用 Redux 来实现吗？Redux 是否像一个 reducer 一样与 HOC 一起使用，但每个生成的 MyComponent 的状态都是分开的？我应该在这里使用 HOC 吗？

标签： javascriptreactjsreact-reduxhigher-order-components

解决方案

这是提升状态的常见情况。一个共同的父母应该主持这个国家，这似乎是Root在这种情况下。

由于通过 props 将状态传递给多个深度嵌套的组件可能很麻烦，因此可以通过 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 可以解决但不是必需的问题。

推荐阅读