时间戳

首页 > 解决方案 > React Redux HOC

javascript - React Redux HOC

问题描述

我正在尝试创建一个简单的 React HOC，以根据 Redux 状态中是否存在特定值来决定是否渲染组件。

我的 HOC 看起来像这样：

const HOC = (ComponentA, value, ComponentB) => {
    const wrapper = props => {
        props.componentDecision.key === value ? (
            <ComponentA {...props} />
        ) : (
            <ComponentB {...props} />
        );
    };

    return connect(({ componentDecision }) => ({ componentDecision }), null)(wrapper);
};

当我将它与路由等一起使用时，一切正常，但是对于像React-Bootstrap Tabs这样的组件，我无法使用我的 HOC 隐藏/传递道具到选项卡，如下所示：

<Tabs ...>
 <Tab ..>
 {HOC(Tab, 'dynamicTab', null)} // passing null to hide it if value isn't dynamicTab
</Tabs>

我相信问题是因为 Redux 的connect()HOC 被退回。我尝试通过扩展 ComponentA 并返回super.render()而不是connect()在 DOM 树中引入 a 来在我的 HOC 中进行继承反转，但这样做我必须处理 Reduxstore.getState()等store.unsubscribe()。

有什么更好的方法来做这样的事情？如何创建这个 HOC 以连接到 redux 状态但仍返回传入的原始组件？将道具作为函数参数传递给我的 HOC 看起来不太好。

标签： javascriptreactjsredux

解决方案

与 Routes 一起使用时，您只需要将组件传递给 Route，但是在渲染函数中，您需要像这样渲染它

const DynamicTab = HOC(Tab, 'dynamicTab', null);

然后在组件的render方法中；

<Tabs ...>
 <Tab ..>
   <DynamicTab />
</Tabs>

推荐阅读