如何正确使用高阶组件

问题描述

我使用 React 上下文 并从每个文件中不同文件的上下文中获取值我使用相同的代码，如下所示

const { SideBarValue,SideBarWallpaperValue } = React.useContext(CounterContext);

const [SideBarTheme,SetSideBarTheme] = SideBarValue;
const [,SetSideBarBackground] = SideBarWallpaperValue;

这段代码经常在不同的文件中重复，我决定将这些数据封装在高阶组件

目前，我的高阶组件是这样的

import {CounterContext} from "../Content/Courses/Lessons/components/Theme/ThemeDoc";

export const HocSideBarTheme = (HocSideBarThemeComponent) => {
    return function HocSideBarValues() {
        const {SideBarValue} = React.useContext(CounterContext);
        const [SideBarTheme,] = SideBarValue;

        return <HocSideBarThemeComponent SideBarTheme={SideBarTheme} />
    }
}

现在我想在其他组件中导入这个组件并获取SideBarTheme值

但问题是我无法理解如何重新调整它，我阅读了 documentation 并且它说有一些选项可以连接其他组件，例如

const NavbarWithRouter = withRouter(Navbar);

但我认为这个选项不适合我的例子，我想你需要使用 "react-redux" 库中的 "connect"，然后再次使用 mapStateToProps 获取值，也许我错了，这是我的观点，但我认为您已经了解我想要达到的目标。聆听您的回答会很有趣，感谢您的关注

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）