在前端开发中，有时需要在页面的交互过程中展示一些加载状态，以便用户知道当前操作正在进行中。这时候，我们可以使用一个名为 react-block-ui 的 npm 包来实现这样的效果。
简介
react-block-ui 是一个基于 React 开发的 Loading 组件库。它可以用来阻止用户在等待异步操作完成之前对页面进行任何其他的操作。
安装
使用 npm 来安装 react-block-ui：
npm install --save react-block-ui
使用方法
引入组件
在需要使用的组件所在的文件中导入 BlockUi 组件：
import BlockUi from 'react-block-ui'; import 'react-block-ui/style.css'; // 引入样式文件
在组件内部使用
在组件中使用 BlockUi 组件，并将需要包裹的内容作为它的子元素传入，如下所示：
<BlockUi blocking={this.state.blocking}>
<div>需要被包裹的内容</div>
</BlockUi>其中，blocking 属性表示是否需要阻止用户进行任何非异步操作。当其值为 true 时，用户无法进行任何操作；当其值为 false 时，用户可以正常进行操作。
自定义 Loading 图标
react-block-ui 组件库默认提供了一个简单的 Loading 图标，但你也可以使用自己的 Loading 图标。只需要在 BlockUi 组件中添加一个 loader 属性，并将其值设置为自定义的图标组件即可，如下所示：
<BlockUi blocking={this.state.blocking} loader={<CustomLoader />}>
<div>需要被包裹的内容</div>
</BlockUi>自定义样式
你可以通过覆盖默认样式来自定义 react-block-ui 组件的外观。只需要创建一个新的 CSS 文件，并将需要修改的样式写入其中，然后在应用程序中引入该文件即可。
示例代码
以下是一个简单的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ---- -----------------
------ ---------------------------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
--------- ------
----- --
--
-
--------- - ----- -- -- -
--------------- --------- ---- ---
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
--------------- ---- ---
- ----- ------- -
---------------------
- ------- -
--------------- --------- ----- ---
-
--
-------- -
----- - --------- ---- - - -----------
------ -
-------- ------------------- --------------------- ----
-----
------- --------------------------------------
----
-------------- -- -
--- ------------------------------
---
-----
------
----------
--
-
-
-------- -------------- -
------ -------- ------- ---------
-在上述示例代码中，我们使用 react-block-ui 组件来阻止用户在数据加载过程中对页面进行其他操作，并展示了如何在组件中自定义 Loading 图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38592