React.js-显示/隐藏加载图像的好方法是什么

Question

我的页面中有一个正在加载的图片以及许多React组件。 在几个组件中，我需要实现显示/隐藏加载图像的功能。

因此，我可以想到三种选择：

1. 在每个组件中，使用状态变量和loadingImage组件显示隐藏图像。 像下面的代码：

   {this.state.showLoaidngImage ? <LoadingImage/> : null}

2. 我只能选择将此组件放在顶级组件中，而让子组件调用父显示加载图像方法。
3. 我也可以在每个组件中使用纯jquery并直接使用id来显示/隐藏

第一种方法似乎在每个组件中都复制了组件标签，我在考虑这是否是一种好方法。

第二个实现起来有点复杂。

第三种方法对我来说似乎很肮脏。

那么在反应世界中我应该使用哪一个呢？

Answer 1

您应该采用第二种方法，因为在那种情况下，您不必再次重写您的loadingImage组件，并且根据反应良好的做法，我们应该为所有组件创建组件，并尽可能使用它们。

Answer 2

我想我更喜欢将您的LoadingImage放在一个组件内部，该组件通过prop处理隐藏和显示。 像这样：

import React from 'react';
import PropTypes from 'prop-types';
import LoadingImage from 'where/this/exists';

const Loader = ({
    show
}) => {
    return (
        { show && <LoadingImage /> }
    );
};

Loader.propTypes = {
    show : PropTypes.bool.isRequired
};

export default Loader;

然后在您的模板中：

<Loader show={ this.state.showLoader } />

Answer 3

（此结果可能与@awildeep的响应结合在一起）

假设您具有可提取到API的React组件，并且这些组件分别需要“加载映像”，我想到的第一件事就是使用redux和redux-promise-middleware 。

为什么？

例如，您可能具有全局状态

API_1: {
  isFullfilled: false,
  isRejected: false,
  ...
},
API_2: {
  isFullfilled: false,
  isRejected: false,
  ...
}

例如，假设您有两个与这些API连接的React组件。 您将有两种状态！

{!this.state.API_1.isFullfilled && !this.state.API_1.isRejected : <LoadingImage /> : null }

是的，这是太多代码，但是在mapStateToProps中有一种简单的方法：

const mapStateToProps = state => {
  const { API_1, API_2  } = state
  return {
    isFullfilled_API_1: API_1.isFullfilled,
    isRejected_API_1: API_1.isRejected,
    isFullfilled_API_2: API_2.isFullfilled,
    isRejected_API_2: API_2.isRejected,
  }
}

// Let's get those variables!
const { isFullfilled_API_1, isRejected_API_1 } = this.props

{ !isFullfilled_API_1 && !isRejected_API_1 ? <LoadingPage> : null}

• 您可以轻松跟踪每个组件的状态
• 您将实现您的目标！

希望对您有所帮助，如果您有任何疑问，请告诉我！