使用 Connect 响应无状态组件

Question

我想创建一个身份验证 HOC 来重定向用户或显示组件。

即：

const AuthExtender = props => {
if (!props.logged) return <Redirect to="/login" />;
return <WrappedComponent />;
}
const authCompWithState = connect(state=>({logged:state.logged}))(AuthExtender);

我知道这是不对的，但这是我想要的想法：

const MembersPageForLoggedOnly = memberOnlyPageHOC(MemebersPage);

我尝试了这么多版本的函数返回函数，但我无法确定它......

有什么想法吗？

谢谢！

Answer 1

使用此代码，可以创建一个仅包含一个函数的HOC，并将其连接到存储区。

const membersOnly = WrappedComponent => {

// render redirect if not logged, else component
const comp = ({ logged, ...props }) => {
return logged ? <Redirect /> : <WrappedComponent {...props} />
}
// connect it to store
return connect(state => ({logged: state.logged}))(comp)
}
// render
const HomePageMembersOnly = membersOnly(HomePage)

您也可以单独撰写它。

const membersOnly = WrappedComponent => ({ logged, ...props }) => {
return logged ? <Redirect /> : <WrappedComponent {...props} />
}
// use it directly
const MembersOnlyHomePage = connect(state => ({logged: state.logged}))(membersOnly(HomePage))

仅供参考，请记住始终将未使用的props传递给您的WrappedComponent。

Answer 2

我看到的 HOC 的通常用法是它返回一个类：

const authExtender = WrappedComponent => {
return class extends Component {
render() {
if(!this.props.loggedIn) {
return <Redirect to={'/login'} />;
}
return <WrappedComponent {...this.props} />;
}
}
};

然后：

export default authExtender(SomeComponent);