在进行前端开发过程中,我们可能会遇到需要在组件加载期间进行一些特定的操作,比如加载时展示一个 Loading 组件、请求数据时展示一个数据加载中的提示等。这时,我们可以使用 HOC(High Order Component)来实现这些效果。npm 包 react-hoc-loading
就为我们提供了这样的功能。本文将介绍使用教程。
安装
我们可以使用 npm 安装 react-hoc-loading
,命令如下:
npm install react-hoc-loading --save
使用
基本使用
在需要使用 HOC 的组件中,我们使用 withLoading
函数来对组件进行包装,如下:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------- ---- -------------------- ----- ----------- ------- --------------- - -------- - ----- - ----------- - - ----------- ------ - ----- ------- ----------- -- ----------------------------------- ------- ----------- -- ------------------------ ---------------- ------ -- - - ------ ------- -------------------------
在上述代码中,我们使用 withLoading
对 MyComponent
进行了包装,并将它导出。
自定义 Loading 组件
除了使用默认的 Loading 组件,我们还可以通过传入自定义的 Loading 组件来实现更加丰富的效果。使用 withLoading
函数时,我们可以传入 options
对象,该对象可以有两个属性:isLoading
(Boolean)和LoadingComponent
(React.Component)。
其中 isLoading
为 true 时,LoadingComponent
将会被渲染。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------- ---- -------------------- ----- --------- ------- --------------- - -------- - ------ ---------------------- - - ----- ----------- ------- --------------- - -------- - ----- - ----------- - - ----------- ------ - ----- ------- ----------- -- ----------------------------------- ------- ----------- -- ------------------------ ---------------- ------ -- - - ------ ------- ------------------------ - ---------- ------ ----------------- --------- ---
在上述代码中,我们传入了自定义的 Loading 组件 MyLoading
,并将 isLoading
属性设为 false,意味着组件在默认情况下不会显示 Loading 组件。但是当我们通过 showLoading(true)
方法让组件显示 Loading 时,MyLoading
组件会被渲染。
示例代码
下面是一个简单的示例,演示了如何使用 react-hoc-loading
展示 Loading 组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------- ---- -------------------- ----- --------- ------- --------------- - -------- - ------ ---------------------- - - ----- ----------- ------- --------------- - -------- - ----- - ----------- - - ----------- ------ - ----- ------ -------------- ------- ----------- -- ----------------------- ------------- ------- ----------- -- ------------------------ ---------------- ------ -- - - ------ ------- ------------------------ - ---------- ------ ----------------- --------- ---
总结
使用 react-hoc-loading
可以方便地实现在组件加载期间展示 Loading 组件的效果,大大提升了用户体验。当我们需要自定义 Loading 组件时,只需在 withLoading
函数中传入相应的参数即可。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cb981e8991b448e6261