loading-hoc
v0.0.8
Published
loading hoc for react
Downloads
2
Readme
LoadingHoC
通用的Loading高阶组件,支持定制加载中、加载失败的各种页面。
一般用法
直接使用
import LoadHOC from 'loading-hoc'
class App extends React.PureComponent {
/**
* 发送并行数据请求
* */
componentFetchData() {
return [
fetch(),
new Promise(rs => setTimeout(rs, 1000))
]
}
/**
* 数据统一返回后处理
* */
componentDidFetch(ps) {
const [r1, r2, ...rest] = ps;
}
}
export default LoadHOC(App, { timeout: 3000 })
可配置参数
可以配置的参数包括:
timeout: 整数,加载超时时间,默认5000ms
renderLoading: 函数,加载中的页面渲染,一般需要在项目中定制,默认为
() => <div>数据加载中...</div>
renderFail: 函数,加载失败的页面渲染,一般需要在项目中定制,默认为
() => <div onClick={() => window.location.reload()}>刷新</div>
fetchDataFunc: 字符串,目标组件中,发送数据的方法,该方法必须返回一个promise或者一个promise数组,代表需要(并行)请求的数据,默认方法名为"componentFetchData", fetchDataCallback: 字符串,获取到数据的回调函数。"componentDidFetch"。这个回调函数可以同时出现在组件方法中,或者成为组件的属性。当数据获取完成后,首先调用组件方法中的fetchDataCallback(如果有的话),然后再调用props中的fetchDataCallback(如果有的话)。
更为常见的用法如下,在项目中将根据需要,定制加载组件的各种处理,然后在各个页面中直接调用高阶组件即可。
/**
*** 公共组件:components/LoadHOC
**/
import LoadHOC from 'loading-hoc';
import './index.less';
const renderLoading = () => (
<div className="am-loading page">
<i className="am-icon loading" aria-hidden="true"></i>
<div className="am-loading-text">数据加载中...</div>
</div>
);
const renderFail = () => (
<div className="am-page-result">
<div className="am-page-result-wrap no-button">
<div className="am-page-result-pic am-icon page-busy"></div>
<div className="am-page-result-title">系统繁忙,请稍后再试</div>
</div>
<div className="am-page-refresh" onClick={() => window.location.reload()}>刷新</div>
</div>
);
const Defaults = {
renderFail,
renderLoading,
timeout: 5000,
};
export default Component => LoadHOC(Component, Defaults);
在需要增加loading效果的组件上,,项目中的加载中效果和加载失败效果均为统一的样式。
import LoadingHOC from '../../components/LoadHOC';
class App extends React.PureComponent {}
export default LoadingHOC(App);