Question

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

所以我可以想到三个选项：

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

{this.state.showLoaidngImage ? <LoadingImage/> : null}
我只能选择将此组件放在顶层组件中，让子组件调用父显示加载图像方法。
我也可以在每个组件中使用纯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的回复结合使用）

假设你有React组件提取到API，而这些组件需要单独“加载图像”，我首先想到的是使用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}

您可以毫不费力地跟踪每个组件的状态
你将实现目标！

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

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

3 个答案: