在前端开发中，常常需要使用到弹出框、工具提示等界面元素。而在实现这些元素的浮动效果时，需要使用到 popper.js 这个库。随着 React 在前端开发中的应用越来越广泛，@atlaskit/popper 这个基于 popper.js 的轻量级 React 组件库也越来越受到开发者的青睐。本篇文章将为你详细介绍 @atlaskit/popper 的使用方法，帮助你快速实现浮动效果。
安装
在开始使用 @atlaskit/popper 之前，你需要先安装相关的依赖。打开命令行工具，在项目中使用以下命令进行安装：
npm install @atlaskit/popper popper.js react react-dom styled-components --save
除了 @atlaskit/popper 之外，还需要安装 popper.js、react、react-dom、styled-components 这几个依赖。其中，popper.js 是用来实现浮动效果的重要库，而 react 和 react-dom 则是需要用到的 React 库，styled-components 则是为了方便实现组件样式的工具。
简介
@atlaskit/popper 的主要目的是简化 popper.js 的使用流程，实现更加方便、快捷的浮动效果。在使用 @atlaskit/popper 时，你可以直接使用 Popup 组件实现浮动效果，无需再手动创建 popper.js 实例。
使用
使用 @atlaskit/popper 实现的 popup 具有以下特点：
- 支持多种浮动方向。
- 支持定时自动关闭和手动关闭。
- 支持浮动框的大小和位置自定义。
- 支持浮动框和触发元素之间的各种关联方式。
基本用法
使用基本的 Popup 组件非常简单。只需要 import 组件，并将相应的控制参数作为 props 传递给组件即可。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- -------------------
-------- ----- -
----- -------- ---------- - ----------------
------ -
-----
------- ----------- -- --------------------- --------------
------ --------------- ---------------- ------ ----------- -- ------------------
---------------- ---- ------- --- --- -----------
--------
------
--
-在上面的例子中，我们定义了一个名为 App 的 React 组件，并在其中使用 Popup 组件来实现浮动效果。其中，我们使用 useState 钩子来绑定 isOpen 状态，确保当 isOpen 发生变化时，Popup 组件是否弹出也能做出相应的改变。在这里我们使用了一个 button 元素来触发 isOpen 状态的变化，当点击按钮时，isOpen 将会被设置为 true，弹出浮动框；当点击浮动框上的关闭按钮时，isOpen 将被设置为 false，浮动框将被关闭。
在 Popup 组件中，我们将 isOpen 设置为 true 以显示弹出框。属性 position 则用来指定弹出框的浮动位置，其取值范围包括 bottom，top，left 和 right 等。onClose 属性用于绑定 Popup 关闭事件。此外，需要在 Popup 中嵌入内容。
支持更多属性
在 Popup 的基础上，@atlaskit/popper 还为开发者额外提供了很多属性和方法。以下简要介绍了其中一部分：
- placement
placement 属性主要用于控制浮动框的方向，其取值范围包括 bottom, top, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start 和 right-end。需要注意的是，当 Popup 无法在屏幕上正常展示时，会根据 placement 自动调整 Popup 的位置，触发回调函数并将新的位置信息传递给开发者。
- usePortal
这个属性用于控制弹出框中是否使用 portal。如果开启了 portal，则 Popup 会在外层节点的子级中创建一个新的 div 容器，用来渲染弹出框的内容。如果不开启，则弹出框的内容将直接添加到 Popup 的父元素中。
- content
这个属性用于定义 Popup 的内容。你可以使用文本内容、HTML 标记甚至 React 组件来定义弹出框中的内容。
- mountTo
当使用 usePortal 属性插入弹出框时，需要将弹出框渲染到不同的元素中。 mountTo 属性用于指定需要将弹出框插入的元素。默认值为 document.body。
- unmountOnExit
当属性值为 true 时，Popup 关闭时会销毁弹出框的 DOM 节点。这有助于减少内存使用量。
- innerRef
这个属性用于获取 Popup 节点的引用，可以用于实现一些高级功能，如手电筒效果。
示例
现在让我们来看一个完整的 Popup 组件的使用示例，该示例能够实现一组浮动菜单的功能。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- -------------------
------ ------ ---- --------------------
----- ---- - ----------
----------- -----
------- --
-------- --
----------------- --------
------- --- ----- --------
----------- - --- --- ------- -- -- -----
-------------- ----
--
----- -------- - ----------
-------- --- -----
------ --------
------- --------
------- -
----------------- --------
-
--
-------- ----- -
----- -------- ---------- - ----------------
------ -
-----
------- ----------- -- --------------------- --------------
------
---------------
----------------- ------
----------- -- -----------------
---------
------
-------------- ---- ------------
-------------- ---- ------------
-------------- ---- ------------
-------
-
--
------
--
-在这个例子中，我们创建了一个名为 Menu 的组件，该组件包括三个名为 MenuItem 的子组件。通过样式设置，我们定义了 Menu 的显示效果和 MenuItem 的鼠标悬停效果。然后在 App 组件中，我们使用 Popup 组件和 Menu 组件一起实现了一组浮动菜单的效果。当用户点击按钮时，菜单会在指定的位置浮动显示；当用户关闭菜单时，菜单会自动关闭。
总结
通过本文的介绍，你已经掌握了如何使用 @atlaskit/popper 组件库实现 React 中的浮动效果。你也了解了该组件库提供的一些基本属性和方法。希望这篇文章对你在开发前端应用时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab42b5cbfe1ea06106bd