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

【问题标题】：React.js - what is the good approach to show/hide loading imageReact.js - 显示/隐藏加载图像的好方法是什么
【发布时间】：2018-03-01 04:27:05
【问题描述】：

我的页面中有一个加载图像和一些反应组件。在几个组件中，我需要实现显示/隐藏加载图像的功能。

所以我能想到三个选项：

在每个组件中，使用一个状态变量和一个 loadingImage 组件来显示隐藏图像。如下代码：

{this.state.showLoaidngImage ? <LoadingImage/> : null}
我可以选择只让这个组件在顶级组件中，让子组件调用父显示加载图像的方法。
我这里也可以在每个组件中使用纯jquery，直接使用id来显示/隐藏

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

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

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

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

【问题讨论】：

在每个组件中使用状态将迫使您将所有内容都作为基于类的组件，这既不是一个好主意也不推荐。
@izengod 如果他需要在他需要状态的组件中显示/隐藏图像。你能展示你的数据吗？

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为我更倾向于将您的 LoadingImage 放在一个组件本身中，该组件本身可以通过道具处理隐藏和显示。像这样的：

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 } />

【讨论】：

【解决方案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}

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

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

【讨论】：