随着前端技术的不断发展，我们经常需要使用到一些常用组件，其中下拉框（select）是常常被用到的一个组件，本文介绍npm包 react-reusable-select 的使用教程。
react-reusable-select 简介
react-reusable-select 是一个基于 React 开发的、可以自定义样式的下拉框组件，它提供了丰富的功能和易用的 API，可以让我们快速构建出符合我们要求的下拉框。
安装
npm install react-reusable-select
使用
基本用法
-- -------------------- ---- -------
------ ------ ---- ------------------------
----- ------- - -
------- -------- ------ ------
------- --------- ------ ------
------- --------- ------ ------
--
-------- ----- -
----- --------------- ----------------- - -------------
----- ------------ - ------- -- -
------------------------
--
------ -
-------
---------------------
-----------------------
-----------------
--
--
-这里定义了一个options数组，用来作为选项列表。在handleChange方法中，每次下拉框的选中值发生变化时会调用它，将选中的值更新到组件的状态中，同时将这个方法传递给了Select组件。可以通过value和onChange属性将这个组件与状态关联起来，再把options传递给它，就可以渲染出一个基本的下拉框了。
深入使用
react-reusable-select 提供了很多自定义的 props 来满足我们的需求，使得它变得更加强大、易用和灵活。
手动控制打开/关闭下拉框
-- -------------------- ---- -------
------ ------ ---- ------------------------
----- ------- - -
------- -------- ------ ------
------- --------- ------ ------
------- --------- ------ ------
--
-------- ----- -
----- --------------- ----------------- - -------------
----- -------- ---------- - ----------------
----- ------------ - ------- -- -
------------------------
-----------------
--
------ -
-------
---------------------
-----------------------
-----------------
---------------
---------- -- ----------------
----------- -- -----------------
------------------------ -- ------- --------------------------------
--
--
-这个例子中，在组件状态里新增了一个 isOpen 变量，表示下拉框是否打开。同时，最外层的 Select 组件的 isOpen 属性通过这个变量控制是否打开下拉框。打开下拉框可以通过 onOpen 或者直接把 isOpen 设为 true 实现，关闭下拉框可以通过 onClose 或者直接把 isOpen 设为 false。最后，通过 renderToggle 属性，我们可以自定义渲染下拉框的 trigger，在这个例子里，是一个按钮。
自定义选项的渲染方式
-- -------------------- ---- -------
------ ------ ---- ------------------------
----- ------- - -
------- -------- ------ ----- ---- -------------
------- --------- ------ ----- ---- --------------
------- --------- ------ ----- ---- --------------
--
-------- ----- -
----- --------------- ----------------- - -------------
----- ------------ - ------- -- -
------------------------
--
----- ------------ - -------- -- -
---- ------------------------
---- ---------------------------- --
---------------------------
------
--
------ -
-------
---------------------
-----------------------
-----------------
---------------------------
--
--
-在这个例子里，我们自定义了 renderOption 函数来渲染选项列表，其中 option 表示每个选项，根据传进来的选项渲染出我们需要的样式。将这个函数传递给 renderOption 属性即可。
搜索选项
-- -------------------- ---- -------
------ ------ ---- ------------------------
----- ------- - -
------- -------- ------ ------
------- --------- ------ ------
------- --------- ------ ------
--
-------- ----- -
----- --------------- ----------------- - -------------
----- ------------ - ------- -- -
------------------------
--
----- ------------ - -------- -------- -- -
------ ----------------------------- --- ---
--
------ -
-------
---------------------
-----------------------
-----------------
----------
---------------------------
--
--
-在这个例子里，我们开启了搜索功能 searchable，并定义了 filterOption 函数，这个函数的作用是根据关键字过滤选项，如果选项的 label 里包含关键字就会被保留。然后将这个函数传递给 filterOption 属性即可。
总结
通过这篇文章，我们学习了如何使用 react-reusable-select 这个 npm 包，了解了它的基本用法和一些高级特性，希望本文可以对想要使用它的同学提供指导和帮助。
完整示例代码见 https://codesandbox.io/s/react-reusable-select-6enwn
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596781e8991b448d6ec2