React Redux HOC

Question

我正在尝试创建一个简单的 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() 来在我的 HOC 中进行继承反转，以免在 DOM 树中引入 connect()，但这样做我必须处理 Redux 的 store.getState()、store.unsubscribe() 等。

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

Answer 1

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

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

然后在组件的render方法中；

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