简介
kingsoft-dva-loading 是一个基于 dva-loading 封装的 loading 组件，可以方便地在 React 项目中集成使用，解决异步请求时的 UI 交互体验问题，提高用户体验度。
安装
npm install kingsoft-dva-loading --save
使用
引入
import Loading from 'kingsoft-dva-loading';
渲染
const { loading, dispatch } = this.props;
return (
<div>
<Loading loading={loading.global} />
<button onClick={() => dispatch({ type: 'example/getData' })}>获取数据</button>
</div>
);参数
| 参数名 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| loading | Boolean | 是 | 是否显示 loading，一般传入 loading.global |
| children | ReactEle | 否 | loading 显示的前缀 |
| full | Boolean | 否 | 是否全屏显示 |
| color | String | 否 | loading 的颜色，支持 HEX、RGB、RGBA、HSL、HSLA，必须为字符串 |
示例代码
React Class Component 示例
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ---- -----------------------
----- ------- ------- --------- -
-------- -
----- - -------- -------- - - -----------
------ -
-----
-------- ------------------------ --
------- ----------- -- ---------- ----- ----------------- -----------------
------
--
-
-React Function Component 示例
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -----------------------
-------- --------- -------- -------- -- -
------ -
-----
-------- ------------------------ --
------- ----------- -- ---------- ----- ----------------- -----------------
------
--
-总结
kingsoft-dva-loading 是一个基于 dva-loading 封装的 loading 组件，提供多种参数设置，使用简单方便，解决了异步请求时的 UI 交互体验问题。通过阅读本文，你已经了解了该组件的安装、使用、参数以及示例代码，希望这对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2d81e8991b448d7cef