Web 开发中，经常需要在页面中展示 loading 动画，以提示用户正在加载数据。 wh-react-spinner 是一个可以帮助开发者在 React 应用中使用 loading 动画的 npm 包。本文将介绍 wh-react-spinner 的使用教程，包括如何安装，如何使用以及一些示例代码。
安装
确保已经在项目中安装了 React 和 React-DOM，然后使用 npm 包管理器安装 wh-react-spinner：
npm install wh-react-spinner --save
使用
在需要使用 loading 动画的 React 组件中导入 wh-react-spinner，并将其包装在需要添加 loading 动画的组件外部。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------------
----- ----------- - -- -- -
------ -
-----
-------- --
---------- ------- ----------
------
--
-
------ ------- ------------Props
wh-react-spinner 有一个可选的 props 参数，可以用于自定义 loading 动画的样式。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| color | string | #ffffff | loading 动画的颜色 |
| thickness | number | 5 | loading 动画的粗细 |
| speed | number | 0.8 | loading 动画的旋转速度 |
| size | number | 50 | loading 动画的大小 |
| style | object | { } | 自定义样式，例如 position 和 top 等 |
| className | string | '' | 自定义类名 |
示例代码
自定义样式和类名
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------------
----- ----------- - -- -- -
------ -
-----
--------
------------
-------------
-----------
---------
----------------- -------- ---- ------ ----- -------
--------------------------
--
------------- ------- ---------------
------
--
-
------ ------- ------------隐藏 loading 动画
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------------
----- ----------- - -- -- -
----- --------- ----------- - ---------------
------------ -- -
------------- -- ------------------ ------
-- ----
------ -
-----
-------- -- -------- ---
---------- ------- ----------
------
--
-
------ ------- ------------总结
通过本文，我们了解了 npm 包 wh-react-spinner 的安装和使用方法，以及可选的 props 参数。我们还看到了一些示例代码，包括如何自定义样式和类名以及如何在需要的时候隐藏 loading 动画。
使用 wh-react-spinner 可以方便快捷地在 React 应用中添加 loading 动画，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671098dd3466f61ffdfc7