在前端开发中，实现下拉菜单是非常常见的需求，而 Atlassian 在 React 组件库中已经提供了一个非常好用的下拉菜单组件 —— @atlaskit/dropdown-menu。
本篇文章将详细介绍该组件的使用方法，为读者提供深入的学习和实践指导。
安装
首先，通过 npm 进行安装：
--- ------- -----------------------
安装完成后，可以在项目中直接 import 导入该组件：
------ ------------- - ------------------ ------------ - ---- --------------------------
基础使用
DropdownMenu
DropdownMenu 是该组件的主要内容，它可以包含任意类型的子组件作为菜单项显示，如 DropdownItemGroup 和 DropdownItem。
-------------
--------------
--------------------
-------------------
----------
-
-------------------
----------------- ----------------
----------------- ----------------
----------------- ----------------
--------------------
---------------在该例子中，trigger 选项指定了下拉菜单的触发器，该触发器可以是任意的字符串或组件，并在 DropdownMenu 显示时被渲染。在这里，我们使用了一个字符串 “下拉菜单”。
triggerType 选项指定了触发器的类型，可以是 button、link、menu、custom 等多种类型，用于控制如何渲染触发器组件。此处使用 button，即触发器被渲染成按钮形式。
isMenuFixed 选项指定了下拉菜单是否可滚动，默认为 false，当把它设为 true 时，可以让下拉菜单在弹出时固定在页面上，而不是跟随页面滚动。
shouldFlip 选项在下拉菜单超出视窗时会自动反转组件的方向以保证它完全可见。
DropdownMenu 还有许多其他的选项，包括：
- appearance：下拉菜单的主题样式
- boundariesElement：边界元素，控制下拉菜单弹出时的位置边界范围
- isLoading：菜单项是否正在 loading 中
- shouldAllowMultilineItems：指定是否允许多行显示某个菜单项
- shouldFitContainer：指定是否将菜单宽度适配为容器的宽度
- onKeyDown：键盘操作时的回调
DropdownItemGroup 和 DropdownItem
DropdownItemGroup 和 DropdownItem 是两种常用的菜单项子组件，前者可用于分组显示一组菜单项，后者用于显示一个单独的菜单项。
-------------------
----------------- ----------------
----------------- ----------------
----------------- ----------------
--------------------DropdownItem 还有以下重要的选项：
- isDisabled：菜单项是否禁用
- isSelected：菜单项是否被选中
- onClick：菜单项点击时的回调
进阶使用
菜单定位
DropdownMenu 默认的菜单位置是相对于触发器的左上角在屏幕上弹出。但在实际项目中，我们经常需要针对不同的触发器位置进行不同的菜单排布。
DropdownMenu 通过 boundariesElement 选项需要您明确制定菜单边界，如不指定则默认为 scrollParent。
-------------
----------------------------
-----------------
-
--- --- ---
---------------选择一个边界元素时，您可以使用 document.documentElement、菜单元素或一个父级元素，也可以使用 "viewport"、 "window" 或 "scrollParent" 参数，优先级按照这个列表从高到低排序。
在菜单打开时向 boundariesElement 传递一个运行函数可以捕获菜单打开时的预计边界。
自定义触发器
您可以通过使用 DropdownMenu 的 render 接口并提供一个自定义渲染函数来自定义触发器，并且还可以使用原生 HTML 作为触发器，以实现自己定制化的应用。
-------------
----------------- ------- ------ -- -- -
------ -
------- -----------------
------- - ---- - ---------
---------
--
--
-
--- --- ---
---------------在 renderTrigger 回调函数中，使用 isOpen 参数控制文本提示信息的变化，使用 toggle 函数来切换菜单的打开或关闭。
动态菜单项
DropdownMenu 对于数据源的处理能力是扩展的。如果您有一个可变的数据源，并且需要每次更新组件时都获取数据，下面就是一个可以实现该功能的示例：
------ - -------- - ---- --------
-------- -------------------- -
----- ------- --------- - -----------------------------
-------- ----------------------- -
--------------------- -
--------------------------------------------
-
-
------ -
-------------
---------------------------
-
-------------------
-
-------------- -- -
------------- ----------------------------------------
--
-
--------------------
---------------
-
-在这个示例中，我们使用 useState 来存储一个可变的数据源，并在 onOpenChange 回调中，在菜单关闭时获取新的菜单项列表。菜单项列表的更新也是通过 setItems 函数来实现的。
总结
通过本文的介绍，您应该已经掌握了 @atlaskit/dropdown-menu 组件的基础用法、进阶用法以及一些潜在难点。在实际开发中，您可以根据具体需求进行定制，为您的应用程序提供美观、易用的下拉菜单功能。
完整代码示例：https://codesandbox.io/s/atlaskit-dropdown-menu-6h8lg。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/atlaskit-dropdown-can-menu