用连接反应无状态组件答案

【问题标题】：react stateless component with connect用连接反应无状态组件
【发布时间】：2018-06-19 14:23:26
【问题描述】：

我想创建一个身份验证 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);

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

有什么想法吗？

谢谢！

【问题讨论】：

你在使用 react-router 吗？如果是这样的话，这个answer 帮助我实现了这个功能

标签： reactjs functional-programming reactive-programming

【解决方案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。

【讨论】：

【解决方案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);

【讨论】：