前言
在前端开发中，弹出式引导是非常常见的一种交互方式。在 React 生态环境中，@atlaskit/spotlight 是一款非常好用的弹出式引导库。它可以在页面上添加遮罩层，引导用户完成目标操作。
安装
首先，需要在项目中安装 @atlaskit/spotlight。可以使用 npm/yarn 安装。
npm install @atlaskit/spotlight # or yarn add @atlaskit/spotlight
快速入门
下面我们通过一个简单的例子来了解 @atlaskit/spotlight 的基本用法。假设我们要在页面上使用 @atlaskit/spotlight 来引导用户点击一个按钮。首先，需要引入 Spotlight 组件。代码如下：
import Spotlight from '@atlaskit/spotlight';
接着，我们需要组织页面结构，添加按钮和要展示的内容。代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ----- -
----- ------------------- --------------------- - ----------------
------ -
-----
------- ----------- -- ----------------------------
-----
---------
----------
--------
-----------------------
-
----------
- -------- -- -- ---------------------------- ----- ---- --
- -------- -- -- ------------------- ----- ---- --
--
-
----
------------
------
--
-
------ ------- ----在上面的代码中，我们使用了 useState 来控制 Spotlight 组件是否显示。当用户点击按钮时，使用 setIsSpotlightActive 函数将 isSpotlightActive 状态修改为 true，从而触发 Spotlight 组件的显示。Spotlight 组件的 target 属性指定了要引导的按钮。actions 属性指定了按钮组，当用户点击其中一个按钮时，就会执行相应的逻辑。
进阶用法
除了基本用法之外，@atlaskit/spotlight 还提供了很多高级用法。例如可以使用 SpotlightManager 来管理多个 Spotlight 组件；可以使用 SpotlightTransition 组件来实现更加流畅的展示和隐藏效果等等。在这里，我们就不一一介绍了，读者可以根据实际需要查阅官方文档。
总结
通过本文的介绍，我们了解了 @atlaskit/spotlight 这个弹出式引导库的基本用法。在实际的开发中，通过灵活运用 @atlaskit/spotlight 提供的高级用法，可以实现非常丰富的交互效果，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663081e8991b448e21ea