Question

我试图在react / redux应用程序中单击按钮时将Loader添加为高阶组件。

已经有工作的Loader组件和样式，只需要在单击按钮时设置逻辑show loader并隐藏现有按钮。

按钮组件：

import React from 'react'

import '../../../styles/components/_statement-print.scss';
import Loader from './Loader';

const StatementPrint = (props) => {
  return (
    <div>

      <button
        className="print-statement-button"
        onClick={props.handleStatementPrint}>PRINT
      </button>

    </div>
  );
};

export default Loader(StatementPrint);

装载机：

import React, { Component} from 'react';

import '../../../styles/components/_loader.scss';

const Loader = (WrappedComponent) => {
  return class Loader extends Component {
    render() {
      return this.props.handleStatementPrint // Where must be logic when to show loader or existing button component
        ? <button className="loader-button">
            <div className="loader">
              <span className="loader-text">LOADING...</span>
            </div>
          </button>
        : <WrappedComponent {...this.props} />
    }
  }
}

export default Loader;

在Loader组件中，我添加了注释，需要在设置加载器或按钮时编写逻辑。

我按照这个例子：ReactCasts - Higher Order Components

我搜索了很多例子，但是大部分都展示了如何设置加载器然后是数据取出，但在我的情况下我只需要显示然后触发onClick方法。

那么如何在触发onClick方法时设置逻辑？这是一个很好的方法吗？此外，尝试使用redux状态更好地完成此操作，但不知道如何执行此操作。

任何帮助将不胜感激。

Answer 1

您必须进行少量修改才能达到您想要的效果。包装器组件Loader可以具有isLoading状态，您可以根据该状态决定是显示加载器范围还是显示包装组件。

通过将isLoading函数作为道具传递，包装组件可以更新此状态showLoader。

按钮组件

import React from 'react'

import '../../../styles/components/_statement-print.scss';
import Loader from './Loader';

const StatementPrint = ({handleStatementPrint, showLoader}) => {
  return (
    <div>

      <button
        className="print-statement-button"
        onClick={() => {
          showLoader();
          handleStatementPrint();
        }}>
        PRINT
      </button>

    </div>
  );
};

export default Loader(StatementPrint);

<强>装载机

import React, { Component} from 'react';

import '../../../styles/components/_loader.scss';

const Loader = (WrappedComponent) => {
  return class Loader extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoading: false
      }

      this.showLoader = this.showLoader.bind(this);
    }

   showLoader() {
     this.setState({isLoading: true});
   }

    render() {
      return this.state.isLoading 
        ? <button className="loader-button">
            <div className="loader">
              <span className="loader-text">LOADING...</span>
            </div>
          </button>
        : <WrappedComponent 
            {...this.props} 
            showLoader={this.showLoader}
          />
    }
  }
}

export default Loader;

编辑

由于需要调用handleStatementPrint，因此我更新了点击处理程序以包含该功能。
还使用解构来避免重复输入props。有关详细信息，请参阅here。

Answer 2

只需要一些外部状态。如果你不能拥有外部状态（例如isLoading），那么你可以将一个函数传递给一个load hoc，它将从当前的道具中获取isLoading

示例：https://codesandbox.io/s/8n08qoo3j2

在react / redux应用程序中点击按钮添加加载程序

2 个答案: