reactjs-dropdown 是一个 React 组件，用于在 Web 应用程序中创建下拉菜单。该组件易于使用，有丰富的配置选项，并可进行自定义。
安装
使用 npm，我们可以轻松地安装 reactjs-dropdown：
npm install reactjs-dropdown --save
使用
要使用 reactjs-dropdown，我们需要先导入它：
import Dropdown from 'reactjs-dropdown';
然后，我们可以将其插入到 JSX 中：
<Dropdown
options={[
{ value: 'apple', label: '苹果' },
{ value: 'banana', label: '香蕉' },
{ value: 'cherry', label: '樱桃' },
]}
onChange={(selected) => console.log(selected)}
/>该组件将显示一个下拉菜单，其中包含三个选项：苹果、香蕉和樱桃。当用户选择一个选项时，onChange 回调将被触发，可以打印出用户选择的选项。
配置选项
reactjs-dropdown 有许多自定义选项：
options（必需）：一个对象数组，其中每个对象都表示一个选项。每个对象都应该有value和label属性。placeholder：一个字符串，表示下拉菜单的占位符文本。value：一个字符串，表示当前选项的值。onChange：一个函数，当用户选择一个选项时调用。onOpen：一个函数，在菜单打开时调用。onClose：一个函数，在菜单关闭时调用。menuClassName：一个字符串，表示菜单 div 元素的 CSS 类名。arrowClassName：一个字符串，表示下拉箭头 div 元素的 CSS 类名。arrowClosed：一个 JSX 元素，表示下拉箭头的闭合状态。arrowOpen：一个 JSX 元素，表示下拉箭头的打开状态。classnames：一个对象，表示 CSS 类名的前缀。
自定义选项
要自定义选项，我们可以使用 renderOption 和 renderSelected 属性。这两个属性都应该是函数，返回一个 JSX 元素：
-- -------------------- ---- -------
---------
----------
- ------ -------- ------ ---- --
- ------ --------- ------ ---- --
- ------ --------- ------ ---- --
--
---------------------- -- -------------------- ------------------------
-------------------------- -------- -- ------------------------------------------------
--在这个例子中，我们自定义了选项和选定项的渲染方式。选项现在将显示标签和值，而选定项将显示大写字母标签。
示例代码
-- -------------------- ---- -------
------ -------- ---- -------------------
----- ------------ - -- ------ -- -- -
------
-------------- ----------------
-------
--
----- -------------- - -- -------- -- -- -
-----------------------------------------------
--
----- ------- - -- -- -
---------
----------
- ------ -------- ------ ---- --
- ------ --------- ------ ---- --
- ------ --------- ------ ---- --
--
---------------------
-------------------------
---------------------------
----------------------------
--------------------------
---------------------- -- ------------- --------------- ---
-------------------------- -- --------------- ------------------- ---
-------------------- -- ----------------------
---------- -- ---------------------
----------- -- ---------------------
--
--总结
通过简单的步骤安装和配置，我们可以使用 reactjs-dropdown 轻松地创建自定义下拉菜单。此外，使用自定义函数可以完全控制菜单和选项的呈现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005559381e8991b448d2b7c