[英]react stateless component with connect
I want to create an auth HOC that will redirect the user or show the component. 我想创建一个身份验证HOC,它将重定向用户或显示组件。
ie: 即:
const AuthExtender = props => {
if (!props.logged) return <Redirect to="/login" />;
return <WrappedComponent />;
}
const authCompWithState = connect(state=>({logged:state.logged}))(AuthExtender);
I know this is not right, but this is the idea I want to have: 我知道这是不对的,但这是我想要的想法:
const MembersPageForLoggedOnly = memberOnlyPageHOC(MemebersPage);
I tried so many version of a function that returns function, but I can't nail it... 我尝试了很多版本的返回函数的函数,但我不能钉住它...
Any ideas? 有任何想法吗?
Thanks! 谢谢!
The usual usage of HOC I have seen is it returns a class: 我看到的HOC的通常用法是返回一个类:
const authExtender = WrappedComponent => {
return class extends Component {
render() {
if(!this.props.loggedIn) {
return <Redirect to={'/login'} />;
}
return <WrappedComponent {...this.props} />;
}
}
};
And then: 接着:
export default authExtender(SomeComponent);
Using this code, you can create a HOC
with just one function and connect it to the store. 使用此代码,您可以创建仅具有一项功能的
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)
you could also compose it separatly. 您也可以分开撰写。
const membersOnly = WrappedComponent => ({ logged, ...props }) => { return logged ? <Redirect /> : <WrappedComponent {...props} /> } // use it directly const MembersOnlyHomePage = connect(state => ({logged: state.logged}))(membersOnly(HomePage))
fyi remember to always pass unused props
to your WrappedComponent
. fyi记得始终将未使用的
props
传递给WrappedComponent
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.