前言
React-js 是当前非常流行的一个前端框架，而 npm 包则是 react 中最常见的依赖管理工具，简单易用，让前端工程师能够快速搭建项目，提高开发效率。在这篇文章中，我们将学习 npm 包 react-hopscotch 的用法。
react-hopscotch 是一个为 reactjs 开发人员打造的自动化工具，可用于快速构建自定义的旅游型应用程序，该库可以通过模拟 hopscotch.js 图形库来创建劝导性的引导工具，该工具可以让用户更轻松地了解您的产品。
安装 npm 包
我们首先需要执行以下命令来安装 react-hopscotch 软件包：
npm install react-hopscotch
引入库文件
成功安装 react-hopscotch 库后，我们必须引入相关的 Javascript 和 CSS 文件才能开始使用库函数和样式。我们可以按照以下内容将引入 hopscotch.js 和样式表文件：
import Hopscotch from 'react-hopscotch'; import 'react-hopscotch/dist/css/hopscotch.css';
创建步骤
react-hopscotch 库使用 hopscotch.js 的 API 来创建步骤并引导用户，我们需要定义一些必要的属性来创建这些步骤：
-- -------------------- ---- -------
----- --------- - -
-
------- --------------
-------- ------------------
---------- --------
--
-
------- ---------------
-------- ------------------
---------- -----
--
-
------- --------------
-------- ------------------
---------- --------
-
--现在，我们创建了三个步骤，每个步骤都有以下属性：
target：将要创建的劝导将被附加到的目标元素。content：步骤内容。placement：步骤的方向。
创建劝导
现在我们已经为每个步骤设置了必要的属性。我们可以使用 Hopscotch 组件来创建劝导。
-- -------------------- ---- -------
----------
-----------------
------------------
----------------------
-------------------------
---------------------
-------
-------- ------
------------- -----
-------- -----
-------- ------
-------- ------
-------- ----
--
--我们将步骤属性作为传递给 Hopscotch 组件的 prop ，并提供其他选项来自定义 Hopscotch 功能。例如，我们可以设置以下参数：
showButtons：当此选项为 true 时，Hopscotch 将显示它的 “上一步”和“下一步”按钮。showCloseButton：当此选项为 true 时，Hopscotch 将显示它的“关闭”按钮。onClose：当用户关闭 Hopscotch 时调用函数。onEnd：当游览结束时调用函数。i18n：设置国际化文本。
完整示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------
------ -----------------------------------------
----- --- ------- --------------- -
----- - -
----------- -----
--
--------- - -- -- -
--------------- ----------- ---- ---
--
--------- - -- -- -
--------------- ----------- ----- ---
--
-------- -
----- --------- - -
-
------- ---------
-------- ------------------
---------- --------
--
-
------- ---------
-------- ------------------
---------- -----
--
-
------- ---------
-------- ------------------
---------- --------
-
--
------ -
-----
------- --------------------------------------
---- ---------- -----------------------
--------
------
---- ---------- ------------------------
--------
------
---- ---------- -----------------------
--------
------
---------------------- --
----------
-----------------
------------------
----------------------
------------------------
----------------------
-------
-------- ------
------------- -----
-------- -----
-------- ------
-------- ------
-------- ----
--
---
------
--
-
-总结
npm 包 react-hopscotch 是一款非常方便的 react 库，它可以帮助您快速创建自定义的旅游型应用程序，以指导您的用户更好的使用您的应用程序。在这篇文章中，我们学习了如何使用 npm 包 react-hopscotch，如何创建步骤和劝导，并学习了如何使用 Hopscotch 组件来创建劝导。希望这篇文章对正在寻找 npm 包 react-hopscotch 使用教程的读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662d81e8991b448e20b4