React：如何用 HOC 包装组件？（跨组件访问登录属性）

Question

我有一个 React（使用 redux 和 react-router）应用程序，它在不同的时间点需要根据商店中某些数据的状态和其他一些相关的东西来了解用户是否登录到商店中的数据。

为此，我创建了一个高阶组件，如下所示：

import React from 'react';
import {connect} from 'react-redux';

export function masterComponent(Component){

  class MasterComponent extends React.Component {

    constructor(props){
      super(props);
    }

    loggedIn(){
      return this.props.player.token? true : false
    }

    render(){
      return (
        <Component {...this.props} player={{loggedIn: this.loggedIn()}}/>
      );
    }
  }

  UserComponent.propTypes = {
    player: React.PropTypes.object
  };


  function mapStateToProps(state) {
    return state;
  }

  return connect(
    mapStateToProps
  )(MasterComponent);

}

我的问题是如何最好地将其包装在我的各个组件周围？目前我已经实现了它，以便在传递给 connect 时包装每个单独的组件，这工作正常但感觉有点低效。即：

import {masterComponent} from '../HigherOrderComponents/MasterComponent';

export class ResultsPage extends React.Component {

  constructor(props){
.....
  }


  render(){
    return (
       .....
    );
  }
}



export default connect(
  mapStateToProps,
  mapDispatchToProps
)(masterComponent(ResultsPage));

有更好的方法吗？

Answer 1

这真的取决于您的用例，我看到了 3 种可能的解决方案。下面的代码是未经测试的半伪代码。

您的初始提案，已重构

export function masterComponent(Component) {

  const MasterComponent = (props) => {
    const loggedIn = props.player.token? true : false;

    // initial solution would override player, so you need 
    // something like this
    const player = { 
      ...this.props.player,
      loggedIn,
    };

    return <Component {...this.props} player={player} />
  }

  // Important! Here is the crucial part of the refactoring, 
  // not the coding style changes. Map only the relevant 
  // state properties, otherwise the component would rerender 
  // whenever any state property changed. 
  return connect(state => ({ player: this.state.player }))(MasterComponent);
}

Redux 中间件（个人选择）

function loginMiddleware() {
  return store => next => action => {
    if (action.type === 'ADD_CREDENTIALS') {
      const { player } = store.getState();
      loginService.setPlayer(player);
    }

    // removePlayer if action.type === 'LOGOUT';

    return next(action);
  }
}

并且在您可以使用的任何组件中

loginService.getPlayer()

验证是否有人登录

缺点与您的方法相比：如果操作 'ADD_CREDENTIALS' 已被分派，但请求 loginService.getPlayer() 的组件未重新呈现/更新，您可能最终会遇到不一致的状态。我相信您可以通过更具体的应用知识来解决这个问题。

上下文（我最不喜欢的）

使用 React context 并将所需的属性传递给所有其他组件。

React：如何用 HOC 包装组件？（跨组件访问登录属性）

React: How to wrap component with HOC? (access login property across components)

reactjs

redux

react-router

higher-order-functions

higher-order-components

您的初始提案，已重构

Redux 中间件（个人选择）

上下文（我最不喜欢的）

React：如何用 HOC 包装组件？ （跨组件访问登录 属性）

React: How to wrap component with HOC? (access login property across components)

reactjs

redux

react-router

higher-order-functions

higher-order-components

您的初始提案，已重构

Redux 中间件（个人选择）

上下文（我最不喜欢的）

React：如何用 HOC 包装组件？（跨组件访问登录属性）