尝试连接 HOC答案

【问题标题】：Trying to connect an HOC尝试连接 HOC
【发布时间】：2019-01-29 21:06:11
【问题描述】：

我正在尝试使用用户角色来确定是否显示组件。所以我试图使用 HOC 来处理该功能，但我得到一个我不太明白的错误。这是代码：

import React from 'react';
import { getUserRoles } from 'modules/api/account/user/selectors';
import { connect } from 'react-redux';

const RestrictedOrFallBack = ({
    wrappedComponent,
    role,
    userRoles,
    fallback,
}) => {
    if (userRoles.includes(role)) return wrappedComponent;
    return fallback;
};

const mapStateToProps = state => ({
    userRoles: getUserRoles(state),
});

const ConnectedRestrictedOrFallback = connect(mapStateToProps)(RestrictedOrFallBack);

export { RestrictedOrFallBack };
export default ({
    role,
    fallback = () => (<div />),
}) => WrappedComponent => (
    <ConnectedRestrictedOrFallback
        role={role}
        fallback={fallback}
        WrappedComponent={WrappedComponent}
    />
);

我得到的错误是：React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <Connect(RestrictedOrFallBack) />

我做错了什么？

编辑：根据答案更新代码

import React from 'react';
import { getUserRoles } from 'modules/api/account/user/selectors';
import { connect } from 'react-redux';
import compose from 'utility/compose';

const RestrictedOrFallBack = ({
    wrappedComponent,
    role,
    userRoles,
    fallback,
}) => {
    debugger;
    if (userRoles && userRoles.includes(role)) return wrappedComponent;
    return fallback;
};

const mapStateToProps = state => ({
    userRoles: getUserRoles(state),
});

const ConnectedRestrictedOrFallback = compose(
    connect(mapStateToProps),
    RestrictedOrFallBack,
);

export { RestrictedOrFallBack };
export default ({
    role,
    fallback = () => (<div />),
}) => wrappedComponent => ConnectedRestrictedOrFallback({
    role,
    fallback,
    wrappedComponent,
});

【问题讨论】：

在RestrictedOrFallback 你应该返回fallback() 而不是fallback
这似乎没有解决它。如果我没记错的话，返回后备将返回一个功能组件，这就是我想要的。
你尝试 createElement 还是 React？像这样：createElement(fallback, props)?看起来后备和包装不是纯函数返回有效的东西

标签： reactjs redux react-redux connect higher-order-components

【解决方案1】：

你不能“连接”一个 HOC。 "connect" 返回 HOC 本身，HOC 只能应用于实际组件。

您正在尝试做的是compose 2 个 HOC 以形成一个新的 HOC。

所以你会做这样的事情：

import { connect, compose } from 'redux';

const ConnectedRestrictedOrFallback = compose(
    connect(mapStateToProps),
    RestrictedOrFallback
);

【讨论】：

问题似乎是 userRoles 没有被向下传播，请参阅编辑中的更新代码。
您的问题解决了吗？我没有仔细研究您是如何使用 ConnectedRestrictedOrFallback 的，因此我认为我的回答不太正确。