如果你正在开发 React 应用程序，你可能知道如何手动显示和隐藏加载器。然而，为了更好的用户体验和代码可维护性，我们可以使用 @traveloka/react-load 这个 npm 包。它可以用于显示和隐藏加载器，并且不需要编写太多的代码。
安装
你可以通过 NPM 或者 Yarn 安装 @traveloka/react-load。可以使用以下命令来安装：
npm install --save @traveloka/react-load
或
yarn add @traveloka/react-load
使用
@traveloka/react-load 提供了 LoadWrapper 和 LoadGroup 两个组件。
LoadWrapper
LoadWrapper 是一个高阶组件，它接受一个组件作为参数，并将它包装在一个加载器中。当传递一个布尔值的 isLoading props 为 true 时，加载器会显示。
以下是使用 LoadWrapper 的示例代码：
import React from 'react';
import LoadWrapper from '@traveloka/react-load';
function MyComponent({isLoading}) {
return <div>{isLoading ? 'Loading...' : 'Content'}</div>;
}
export default LoadWrapper(MyComponent);在这个示例中，MyComponent 组件被包装在 LoadWrapper 中，当传递的 isLoading props 为 true 时，加载器会显示。
LoadGroup
LoadGroup 组件是一个可重新排序的加载组。它接受一个数组作为子元素，并将它们包装在一个加载器组中。当传递的 isLoading props 为 true 时，所有加载器都会显示。
以下是使用 LoadGroup 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------------
-------- ------------------------ -
------ -
---------- ----------------------
------------ -------
------------ -------
------------ -------
------------
--
-
------ ------- ------------在这个示例中，LoadGroup 包装了三个 <div>，当传递的 isLoading props 为 true 时，所有的 <div> 都会显示加载器。
高级用法
替换加载器
默认情况下，LoadWrapper 和 LoadGroup 使用自带的加载器。如果你想要替换它们，你可以传递 loader 和 groupLoader props。
以下是一个示例代码，其中 Spinner 组件被用作自定义加载器：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ------------------------
------ ------- ---- ------------
-------- ------------------------ -
------ -
------------ --------------------- ---------------- ----
------------------
--------------
--
-
------ ------- ------------在这个示例中，Spinner 组件被传递给了 LoadWrapper 中的 loader prop。
动态改变加载器
你可以在加载器和内容之间进行转换。这可以通过改变 isLoading props 进行完成。
以下是一个示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ------------------------
------ ------- ---- ------------
----- ----------- ------- --------- -
----- - - ---------- ----- --
------------------- -
-- ------
--------------- ---------- ---- ---
------------- -- -
--------------- ---------- ----- ---
-- ------
-
-------- -
----- - --------- - - -----------
------ -
------------ --------------------- ---------------- ----
------------------
--------------
--
-
-
------ ------- ------------在这个示例中，我们使用了 Component，并在 componentDidMount 生命周期钩子中模拟一个网络请求，同时改变了 isLoading props。这个操作会触发 LoadWrapper 组件中的加载器的显示和隐藏，使得代码更加灵活。
总结
使用 @traveloka/react-load，你可以更加方便地在你的 React 应用程序中使用加载器。你现在已经学会了如何安装、使用，并进行了深入的学习。如果你对此有任何疑问，请在评论中留下您的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673defb81d47349e53bf2