在前端开发中，我们常常需要制作一些用户交互体验良好的页面。其中一个重要的细节就是让用户清楚地知道他们已经阅读了多少内容，还剩下多少内容需要阅读。此时，阅读进度条就可以派上用场。在 React 中，我们可以使用一个名为 React-Reading-Progress 的 npm 包来轻松制作阅读进度条。
1. 安装 React-Reading-Progress
首先，我们需要在项目中安装 React-Reading-Progress：
npm install react-reading-progress
2. 使用 React-Reading-Progress
React-Reading-Progress 包含两个组件：一个是 ReadingProgress，用于显示阅读进度条；另一个是 withReadingProgress 高阶组件，用于将阅读进度条组件注入到其他组件中。
我们可以从 React-Reading-Progress 中引入这两个组件：
import { ReadingProgress, withReadingProgress } from 'react-reading-progress';然后，我们可以在 render 方法中使用 ReadingProgress 组件，例如：
render() {
return (
<div>
<ReadingProgress />
<div>正文内容</div>
</div>
);
}这里，我们将 ReadingProgress 组件放在页面的最上面。此时，打开页面，就可以看到阅读进度条了。
3. 配置 React-Reading-Progress
我们可以使用一些属性来配置 React-Reading-Progress 的表现。例如，我们可以设置进度条的高度：
<ReadingProgress
targetEl="#target-element"
height={5}
/>在这个例子中，我们也使用了 targetEl 属性，这个属性指定了进度条的监听目标元素，默认是监听页面的 body 元素。如果需要监听其他元素的滚动位置，可以设置这个属性值。
React-Reading-Progress 还有其他配置属性，可以在 npm 官网上查看文档。
4. 嵌入到其他组件中
我们也可以嵌入到其他组件中，例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- -
------ -
-----
-------------
---------------- --
---------------
------
--
-
-
----- ------------------------------ - ---------------------------------这里，我们使用了 withReadingProgress 高阶组件，它可以将 ReadingProgress 组件注入到 MyComponent 组件中。这样，MyComponent 就拥有了阅读进度条功能。
示例代码
下面是一个完整的使用 React-Reading-Progress 制作阅读进度条的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- ------------------- - ---- -------------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
-------------
----------------
-------------------
----------
--
---- -----------------------
------
--
-
-
----- ------------------------------ - ---------------------------------
------ ------- -------------------------------总结
React-Reading-Progress 是一个非常简单易用的 npm 包，它可以帮助我们制作阅读进度条，提高页面交互体验。我们可以通过配置一些属性来自定义阅读进度条的外观和行为。通过嵌入到其他组件中，我们还可以让这个功能更加灵活和通用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668581e8991b448e2b20