React Joyride 是一个 React 应用程序中使用的引导包，它可以帮助你创建交互式的教程。
在项目中，我们通常使用 Typescript 编程语言，因此我们需要安装 npm 包 @types/react-joyride 来帮助我们进行类型检查。本文将介绍如何使用 @types/react-joyride 包，以及如何创建一个基本的 Joyride。
安装
要使用 @types/react-joyride，需要使用 npm 进行安装：
npm install @types/react-joyride --save-dev
安装完成后，你可以在项目中使用 Joyride 的类型检查。
创建 Joyride
接下来我们来创建一个基本的 Joyride。首先，让我们安装 React Joyride：
npm install react-joyride --save
然后，在你的组件中引入 Joyride：
-- -------------------- ---- -------
------ ------- ---- ----------------
----- ----- - -
-
------- ------------
-------- --------
--
-
------- -----------
-------- ---------
-
--
-------- ----- -
------ -
-----
------ --------
------- -------------------------
------ ------------ ----------- --
-------- ------------- --
------
--
-
------ ------- ----在上面的代码中，我们定义了一个包含两个步骤的 Joyride，每个步骤都包含一个目标元素和内容。在我们的组件中，我们向用户展示了一个按钮和一个输入框，用于测试 Joyride。
当你运行应用程序时，Joyride 将在页面上显示指示列表以及当前步骤的内容。
让 Joyride 可控制
通常情况下，Joyride 将在渲染时自动开始，而我们可能需要稍后或手动地启动或停止 Joyride。
为了实现这一点，我们需要使用 React State。让我们再次修改我们的组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ----------------
----- ----- - -
-
------- ------------
-------- --------
--
-
------- -----------
-------- ---------
-
--
-------- ----- -
----- ------------ -------------- - ----------------
----- ------------ - -- -- -
--------------------
-
----- ----------- - -- -- -
---------------------
-
------ -
-----
------ --------
------- -------------------------
------ ------------ ----------- --
-------- ------------- ---------------- --
------- ------------------------- ----------------
------- ------------------------ ----------------
------
--
-
------ ------- ----在这个版本的代码中，我们使用了 React State 来控制 Joyride 的运行。我们定义了两个处理程序：startJoyride 和 stopJoyride，在点击按钮时将 runJoyride 更新为 true 和 false。
注意，我们在 <joyride> 组件中添加了一个 run 属性，它是从组件 State 中读取的。这意味着我们可以随时控制 Joyride 的运行状态。
总结
在本文中，我们介绍了如何使用 npm 包 @types/react-joyride，并提供了创建和控制 Joyride 的示例代码。使用 React Joyride，你可以创建交互式的教程，这对于新用户来说非常有用。
希望这篇文章能够帮助你了解如何使用 React Joyride 和 Typescript。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc16eb5cbfe1ea0611dca