介绍
@evansjohnson/react-joyride 是一个基于 React 的轻量级应用程序导航库，用于在您的应用程序中添加一个自动化的产品演示。它是一种简单的方法来为用户提供对您的应用程序的导览，鼓励他们探索您的产品，了解您的特点，以及减轻用户的学习曲线。本文章将为你提供使用 @evansjohnson/react-joyride 的完整教程。
安装
npm install @evansjohnson/react-joyride --save
使用方法
首先，导入所需的组件和样式：
import React, { Component } from 'react';
import Joyride from '@evansjohnson/react-joyride';
import '@evansjohnson/react-joyride/lib/react-joyride-compiled.css';然后，在你的组件中添加 Joyride 组件，设置需要显示的步骤：
-- -------------------- ---- -------
----- ----- ------- --------- -
----- - -
------ -
-
------- ----------------- -- -----
-------- -------- -- -----
--
-
------- ------------------
-------- --------
--
-
------- -----------------
-------- --------
--
--
--
-------- -
----- - ----- - - -----------
------ -
---- ----------------
-------- ------------- --
--- -------------------------------- -----------
-- --------------------------------------------------------------
------- ------------------------- -------------------------
------
---------
------
--
-
-现在，只需在需要显示 Tour 的事件(例如按钮的点击事件)中激活 Tour：
startTour = () => {
this.setState({
run: true,
});
}就可以运行整个 Tour 了。
属性
以下是 Joyride 可以接受的所有属性：
steps
(必选) : 数组，包含所有的 Tour 步骤。
run
默认:false，tour 开始后会变为 true。
continuous
默认:false，当完成了整个 Tour 时是否重新开始。
disableOverlayClose
默认:false，可以通过点击引导遮罩层外的其他元素来关闭 Tour。如果设置为 true，则不允许关闭 Tour。
disableOverlay
默认:false，指示是否应该应用引导遮罩层。如果设置为 true，则不显示遮罩层。
disableCloseButton
默认:false，在引导过程中是否显示关闭按钮。
disableScrolling
默认:false，当 Tour 正在运行时，是否允许滚动。
showProgress
默认:false，是否显示进度条。
showSkipButton
默认:false，是否显示跳过按钮。
showBackButton
默认:false，是否显示后退按钮。
showOverlay
默认:true，是否显示遮罩层。
spotlightClicks
默认:false，是否将用户单击限制在区域内。
spotlightPadding
默认: 10,遮罩层填充大小。
styles
包含所有可自定义的样式。
事件
以下是 Joyride 发出的所有事件:
callback
默认:()=>{}，在 Tour 过程中返回每一个步骤的 status 和 type。
complete
在 Tour 完成时触发的事件。
error
当有错误发生时触发的事件。
close
关闭 Tour 时触发的事件。
示例代码
以下是一个完整的使用示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ---- ------------------------------
------ -------------------------------------------------------------
----- ----- ------- --------- -
----- - -
---- ------
------ -
-
------- -----------------
-------- --------
--
-
------- ------------------
-------- --------
--
-
------- -----------------
-------- --------
--
--
--
--------- - -- -- -
---------------
---- -----
---
-
------- - -- -- -
---------------
---- ------
---
-
-------- -
----- - ---- ----- - - -----------
------ -
---- ----------------
--------
-------------
---------
-----------------
---------------------
-------------------
---------------------
-----------------------
----------------------
--------------------------
------------------------
-----------------------
--------------------
--------------------
--
--- -------------------------------- -----------
-- ---------------------------------- -- -------------------------------
------- ------------------------- -------------------------
----- ----
---------
------
--
-
-
------ ------- ------总结
通过 @evansjohnson/react-joyride，我们可以为我们的产品提供一个简单的，自动化的产品演示，减少用户的学习曲线，让他们更快地熟悉我们的应用程序。通过本文，你已经学会了如何在 React 中使用 @evansjohnson/react-joyride，希望这篇文章能够给你带来指导和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e6d9381d61a3540b16