npm 包 react-hoc-loading 使用教程

阅读时长 5 分钟读完

在进行前端开发过程中,我们可能会遇到需要在组件加载期间进行一些特定的操作,比如加载时展示一个 Loading 组件、请求数据时展示一个数据加载中的提示等。这时,我们可以使用 HOC(High Order Component)来实现这些效果。npm 包 react-hoc-loading 就为我们提供了这样的功能。本文将介绍使用教程。

安装

我们可以使用 npm 安装 react-hoc-loading,命令如下:

使用

基本使用

在需要使用 HOC 的组件中,我们使用 withLoading 函数来对组件进行包装,如下:

-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- --------------------

----- ----------- ------- --------------- -
  -------- -
    ----- - ----------- - - -----------
    ------ -
      -----
        ------- ----------- -- -----------------------------------
        ------- ----------- -- ------------------------ ----------------
      ------
    --
  -
-

------ ------- -------------------------

在上述代码中,我们使用 withLoadingMyComponent 进行了包装,并将它导出。

自定义 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

纠错
反馈