简介
Intro.js 是一个轻量级、无依赖的引导用户使用网站的 JavaScript 库。它支持键盘和鼠标控制，并拥有丰富的 API。而 intro.js-react16 则是专门为 React 组件开发的 Intro.js 封装库。
在本文中，我们将讨论如何在 React16 中使用 intro.js-react16，并使用示例代码演示其用法。
安装
使用 npm 进行安装：
npm install intro.js intro.js-react16
基本用法
首先，我们需要在项目中引入 intro.js 和 intro.js-react16：
import React from 'react';
import ReactDOM from 'react-dom';
import IntroJs from 'intro.js';
import 'intro.js/introjs.css';
import 'intro.js/themes/introjs-modern.css';
import { ReactIntroJs } from 'intro.js-react16';其中，intro.js/introjs.css 和 intro.js/themes/introjs-modern.css 是为了使介绍窗口和箭头样式更适合现代的 WEB 网站，不使用也无影响。
接着，我们建立一个基本的 React 组件，并初始化 IntroJs:
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
------------ - ----------
-
-------- -
------ -
-----
----------- -- -- -------------
------- ----------- -- ----------------------
----- --- -----
---------
------
--
-
-
-------------------- --- ---------------------------------现在，当我们点击“Start the intro”按钮时，Intro.js 就会启动。但是，它只会显示默认的介绍内容，我们需要进一步定制化。
定制化
我们可以在启动 Intro.js 前，先对它进行配置，具体有以下几个步骤：
- 传入已有的
steps。 - 为已知的元素定义特定的位置。
- 编辑每个步骤的选项。
下面是一个示例：
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
------------ - ----------
-------------------------
------ -
-
------ -------- -- -- ----------
--
-
-------- -----------
------ ----- -- --- ----- ----- ---------
--
-
-------- -----------
--------- -------
------ ----- -- --- ------ ----- ---------
--
--
---------------- ------
------------------- ------
---
-
-------- -
------ -
-----
----------- -- -- -------------
------- ----------- -- ----------------------
----- --- -----
---------
---- ------------------ - -------------
---- ------------------ - -------------
------
--
-
-以上代码中，我们首先在 constructor 中设置了 Intro.js 的选项。steps 属性是一个包含各个步骤的数组。第一个对象指定了简介，而后面两个则指定了元素 ID，并且分别为其设定了文字介绍和位置。
showStepNumbers 和 exitOnOverlayClick 则分别定义了在介绍期间是否显示步骤编号以及是否允许在背景覆盖层上单击以退出介绍。
此外，如果 steps 数组中包含了一个元素包含 beforeChangeEvent 回调函数，那么这个函数将在 Intro.js 进入该步骤之前被调用。
例如，我们可以通过 BG 色彩来标识出当前步骤是什么，如下所示：
{
element: '#modal-1',
intro: 'This is the first modal dialog.',
beforeChangeEvent: function() {
document.body.style.backgroundColor = 'rgba(0, 170, 255, 0.1)';
},
exitOnOverlayClick: false,
},beforeChangeEvent 函数可以有一个参数，它是上一个步骤的索引。通过记录当前步骤的索引，我们可以更加灵活地使用一些特定信息。
高级特性
自定义箭头和过渡动画
Intro.js 的选项中还包含一些复杂的自定义，例如 nextLabel、prevLabel 和 skipLabel 可以分别定义导航中的3个标识文字。
另外，我们还可以在顶部指定箭头 SVG：
-- -------------------- ---- -------
-------------------------
---------------- ------
------ -
-
------ ----- -- - ------- ------
-------- ----------------------------------
--------- --------
--
--
---------------- -----
------------- -----------------
--------------- -
---------- ---
----------- ----------
--
------ -
-
-------- -----------
----- ----- -- - --------
------------- ----------------
--
--
---tooltipOptions 属性则可以更改箭头的大小和颜色。还可以设置 scrollToElement: true，以在导航中需要滚动到下一个页面时将它滚动到视图中心。
Ember.js 扩展
此外，Intro.js 还具有一些可以直接同 Ember.js 交互的扩展。例如，在渲染出表单或分类器时就可以使用它们，这些扩展可以引导您必须输入什么以使表单有效，或指导您必须将文件拖放到分类器中。下面是一个简单的表单示例：
-- -------------------- ---- -------
-- ------ ------
---------------------------------------------------------------- ---------- -
--- ----- - ----------
------------------
------ -
-
-------- -------------------------------------
------ ------- ----- ---- -----------
--
-
-------- ------------------------------------
------ ------- ----- ---- ----------
--
-
-------- -------------------------------------
------ ------- ----- ---- -------
--
--
---
----------------- -------- -------------------------------------- ----- --- --- ---- -- ---- -- --- --- ------------ ----
----------------------------- -
-------------
---
---在上述示例代码中，我们首先向 wizard button 添加事件监听器，以在单击时创建一个名为intro的新 IntroJs 实例。
然后，我们传入前 3 个表单元素。Intro.js 将在每个表单元素左侧显示一个箭头，并使黄色边框浮现出来，提示用户进行输入。还可以使用 hints 设置 'Do you want to sign up for our newsletter?'，这将显示一个“何时可选？”的小提示。
总结
我们已经介绍了 Intro.js 和 intro.js-react16，并演示了如何在 React16 中使用 intro.js-react16。 Intro.js 提供了对各种复杂甚至是精细的 UI 元素进行引导的完整机制。它通过相当不同的设置，可以使您的网站引导用户达到最佳的交互体验。
现在，你已经拥有了足够的知识来使用 intro.js-react16，开始构建专业的 GUU 用户界面，享受写 React 组件的快感吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b2681e8991b448e53bb