Question

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

我会将一些信息存储在localStorage中（如果它也是安全的）。

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

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

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

写这门课的最佳方法是什么？另外，出于测试目的，localStorage应该是构造参数吗？

Answer 1

使用A 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.contextTypes = {
  authUser: PropTypes.object,
};

export default withAuthentication(Parent)

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

Answer 2

你可以通过很多方式做到这一点。在之前的项目中，我在currentUser App.js中设置/读取componentWillMount（利用localStorage），然后传递currentUser作为道具。回想起来，使用Context会让我感到悲伤 - 这样你就不会将currentUser传递给可能不需要它的组件。

像这样（未经测试）：

const UserContext = React.createContext()

class UserProvider extends Component {
  constructor(props) {
    super(props)

    this.state = { 
      currentUser: null
    }
  }

  componentWillMount() {
     // Check localStorage for token
     // If present: GetCurrentUser() from backend and 
     // then this.setUser provided everything looks dandy
  }

  setUser = currentUser => {
    this.setState({ currentUser })
  }

  render() {
    const { children } = this.props

    return (
      <UserContext.Provider value={{
        currentUser: this.state.currentUser
      }}>
        {children}
      </UserContext.Provider>
    )
  }
}

const UserReliantComponent = () => (
  <UserContext.Consumer>
    {({ currentUser }) => (
      {/* Use currentUser at will */}
    )}
  </UserContext.Consumer>
)

class App extends Component {
  render() {
    return (
      <UserProvider>
        <A>
          <B>
            <C>
              <UserReliantComponent />
            </C>
          </B>
        </A>
      </UserProvider>
    )
  }
}

您可以将它与更高级别的组件结合起来，以进一步抽象出一些逻辑。

编写可以重用来表示CurrentUser的类的最佳方法

2 个答案: