2

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

已经有工作加载器组件和样式，只需要在单击按钮时设置逻辑显示加载器并隐藏现有按钮。

按钮组件：

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 - 高阶组件

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

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

任何帮助将不胜感激。

4

2 回答 2

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重复输入。请参阅此处了解更多信息。
于 2017-12-02T12:36:59.277 回答
0

只需要一些外部状态。如果你不能拥有外部状态（例如 isLoading），那么你可以将一个函数传递给一个加载器 hoc，它将从当前的 props 派生 isLoading

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

于 2017-12-02T11:01:57.313 回答