介绍
@bnchdrff/react-user-tour 是一个基于 React 实现的用于创建用户引导的 npm 包，可以帮助前端开发者快速构建一个漂亮的用户引导界面。
安装
你可以使用 npm 或者 yarn 安装该包：
npm install --save @bnchdrff/react-user-tour
yarn add @bnchdrff/react-user-tour
快速上手
我们首先需要导入 @bnchdrff/react-user-tour 的组件：
import { UserTour, UserTourStep } from '@bnchdrff/react-user-tour';然后，我们可以使用 UserTour 组件包裹我们需要进行用户引导的组件：
-- -------------------- ---- -------
---------
--------
-
------ ------
-------- --------
------- ---------------
--
-
------ ------
-------- --------
------- ---------------
-
--
-
-----
--- --------------------------
---------------
--- --------------------------
---------------
------
-----------由上面的例子可知，UserTour 组件接收一个名为 steps 的 props，这是一个数组类型。数组中的每个元素代表着引导的每一个步骤，元素包含了步骤的 title、content 以及 target 三个值。其中，title 代表每个步骤的标题，content 代表了每个步骤的具体内容，target 代表了每个步骤需要引导的 HTML 元素的 id。
我们还可以将 UserTourStep 组件和 UserTour 组件同时使用，这样能够更灵活地控制引导的每一个步骤：
-- -------------------- ---- -------
----------
-------------
-----------
---------------
----------------------
-
-----
--- --------------------------
---------------
------
---------------
-------------
-----------
---------------
----------------------
-
-----
--- --------------------------
---------------
------
---------------
-----------交互
@bnchdrff/react-user-tour 同时支持了一些基本的交互，其中包含了下一步、上一步、暂停、重新开始和结束等操作。我们可以使用 next、prev、pause、resume 以及 end 等 props，来控制引导的每一个步骤：
-- -------------------- ---- -------
---------
------------------
------------------
-
-------------
-----------
---------------
----------------------
------------------
-------------------
-
-----
--- --------------------------
---------------
------
---------------
-------------
-----------
---------------
----------------------
-
-----
--- --------------------------
---------------
------
---------------
-------------
-----------
---------------
----------------------
-
-----
--- --------------------------
---------------
------
---------------
-----------结束页面
当我们完成引导后，我们还可以定制化一个“结束页面”：
-- -------------------- ---- -------
---------
--------------------------
-
-------------
-----------
---------------
----------------------
------------------
-
-----
--- --------------------------
---------------
------
---------------
-------------
-----------
---------------
----------------------
-
-----
--- --------------------------
---------------
------
---------------
-------------
-----------
---------------
----------------------
-
-----
--- --------------------------
---------------
------
---------------
-------------
----------
--------------------
-------------
-
-----
--- ------------------------
------
---------------
-----------在最后一个 UserTourStep 中，我们设置了 title 为“结束”，content 为“恭喜你完成了所有引导”，并且将 target 设置为 #end，以此来创建一个结束页面。
总结
@bnchdrff/react-user-tour 是一个非常轻量级的 npm 包，能够帮助我们快速构建一个美观、易用的用户引导功能。通过这篇文章的介绍和示例代码，相信大家会更加熟练地使用该 npm 包，并在实际项目中发挥出它的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573aa81e8991b448e9a48