Попытка подключить HOC - PullRequest
Новая
       38

Попытка подключить HOC

0 голосов
/ 30 января 2019

Я пытаюсь использовать роли пользователя, чтобы определить, отображать или нет компонент.Поэтому я пытаюсь использовать 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,
});

1 Ответ

0 голосов
/ 30 января 2019

Вы не можете "подключить" HOC.«connect» возвращает сам HOC, и HOC могут применяться только к реальным компонентам.

Что вы пытаетесь сделать, это составить 2 HOC для формирования нового HOC.

так что вы бы сделали что-то вроде: 

import { connect, compose } from 'redux';

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