javascript - 编写一个我可以重新使用来表示 CurrentUser 的类的最佳方法

Question

在我的组件中，我需要引用我的 reactjs 应用程序的当前用户。

我会将一些信息存储在 localStorage 中(如果它也安全的话)。

我想要的是在我的组件中我可以做类似的事情:

var currentUser = GetCurrentUser();
currentUser.sessionToken 
currentUser.firstName
currentUser.timezone
currentUser.email
currentUser.logout()

我的 currentUser 也将依赖于使用 localStorage API 来获取 sessionToken 等。

编写此类的最佳方式是什么？另外，出于测试目的，localStorage 是否应该作为构造参数？

Answer 1

使用 HOC。

import React from 'react';
import PropTypes from 'prop-types';

const withAuthentication = (Component) => {
  class WithAuthentication extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        authUser: null,
      };
}

getChildContext() {
     return {
       authUser: this.state.authUser,
     };
  }

  componentDidMount() {
   Call function to get signed-in user (authUser => {
      authUser
        ? this.setState(() => ({ authUser }))
        : this.setState(() => ({ authUser: null }));
  });
}
   render() {
     return (
       <Component {...this.props}/>
     );
   }
}
WithAuthentication.childContextTypes = {
  authUser: PropTypes.object,
};

 return WithAuthentication;
}

export default withAuthentication;

然后把你的Parent组件包在里面

parent

Parent.contextTypes = {
  authUser: PropTypes.object,
};

export default withAuthentication(Parent)

现在在您的应用中的任何位置引用 this.context.authUser。