介绍
在 React 应用程序中，有时需要使用骨架屏效果，以解决页面加载时间过长的问题。而 npm 包 react-js-skeleton 就提供了一个快速简便的解决方案。
react-js-skeleton 是一个 React 组件，它提供了一个可自定义的骨架屏，包括卡片、表单等多个形式，使用方便并且易于定制。
在本文中，我们将深入介绍 react-js-skeleton 的使用方法，包括安装、配置和使用方法。最后，我们将通过示例代码演示它是如何工作的。
安装
要使用 react-js-skeleton，首先需要使用 npm 进行安装。
在项目文件夹中，运行以下命令：
npm install react-js-skeleton --save
配置
在安装完成后，需要在项目中引入 react-js-skeleton 组件。
在应用程序的入口文件（如 index.js）中，添加以下代码：
import Skeleton from 'react-js-skeleton';
使用
使用 react-js-skeleton 非常简单。您只需要将其作为 JSX 元素或组件的一个子元素插入到您的应用程序中即可。
例如，要使用一个基本的骨架屏，只需在应用程序中添加以下代码：
<Skeleton height="150px" width="100%" />
这将创建一个高度为 150 像素、宽度为 100% 的横向骨架屏。您可以根据自己的需要更改高度和宽度。
react-js-skeleton 还提供了其它的骨架屏形式，如卡片和表单。
卡片
要使用骨架卡片，在应用程序中添加以下代码：
<Skeleton.Card />
表单
要使用骨架表单，在应用程序中添加以下代码：
<Skeleton.Form />
这将创建一个包含各种表单元素的骨架屏，例如文本框、下拉框和按钮等。
实例
下面我们将演示 react-js-skeleton 是如何工作的。我们将创建一个基本的页面，其中包含骨架屏和一些数据，以便您可以看到如何将它们结合使用。
首先，创建一个名为 App.js 的新文件，并将以下代码添加到文件中：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ -------- ---- --------------------
-------- ----- -
----- ------ -------- - ---------------
------------ -- -
------------- -- -
---------
------ ------ -- -------- ------
-------- ----------- ----- -- -------- ------
---
-- ------
-- ----
------ -
---- ----------------
--------
--------- - ---------- - --------- ------------- ----------- --------
---------
------
-----
----- - -
---------------------
- - -
--------- ------------- ------------ -------- ------------- -- -- --
--
------
----
--------
-------- -------
--------------- ----------------
--------- -------
---
---- -- -- -- -- ------------- -- -
----
----------
-------- ------ ------ ------------- -- ---
-------------- --
------
---
------
-----
------ -- -
-------------- --
--
------
-------
--------
------------- -- -------- --------
---------
------
--
-
------ ------- ----在这个示例中，我们使用 useState 和 useEffect 来模拟加载数据的过程，并在两秒钟后将数据（标题和内容）设置为状态变量。
在函数体中，我们使用三个不同的方式使用了 react-js-skeleton：
在 header 中，我们使用条件渲染将标题组件包裹在骨架屏组件内。
在 main 中，我们将内容组件包裹在条件渲染中。
在一个显示卡片列表的容器中，我们对一个 div 元素使用了骨架卡片组件，并将其重复渲染了 6 次。
最后，在 footer 中，我们将骨架表单组件包裹在条件渲染中。当数据加载之前，我们将显示表单骨架屏，之后表单内容将在屏幕上渲染。
总结
使用 npm 包 react-js-skeleton，开发人员可以快速轻松地为 React 应用程序添加骨架屏效果。这个组件简单易用，可以轻松地自定义和配置。
在本文中，我们深入介绍了 react-js-skeleton 的使用方法，并为您提供了示例代码，让您可以开始使用它，为您的 React 应用程序添加骨架屏效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566bc81e8991b448e3082