尝试连接 HOC
Trying to connect an HOC
我正在尝试使用用户角色来确定是否显示组件。所以我尝试使用 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,
});
你不能 "connect" HOC。 "connect" returns HOC 本身和 HOC 只能应用于实际组件。
您要做的是compose 2 个 HOC 组成一个新的 HOC。
所以你会做这样的事情:
import { connect, compose } from 'redux';
const ConnectedRestrictedOrFallback = compose(
connect(mapStateToProps),
RestrictedOrFallback
);
我正在尝试使用用户角色来确定是否显示组件。所以我尝试使用 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,
});
你不能 "connect" HOC。 "connect" returns HOC 本身和 HOC 只能应用于实际组件。
您要做的是compose 2 个 HOC 组成一个新的 HOC。
所以你会做这样的事情:
import { connect, compose } from 'redux';
const ConnectedRestrictedOrFallback = compose(
connect(mapStateToProps),
RestrictedOrFallback
);