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

Question

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

所以我能想到三种选择:

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

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

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

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

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

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

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

Answer 1

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