介绍
medipass-react-select 是一个React Select组件的替代品，它具有更好的性能表现，扩展性和用户体验。此组件提供无限选项，异步加载选项，自定义选项渲染等功能。
安装
在项目的根目录下使用 npm 安装该组件：
npm install medipass-react-select --save
使用
medipass-react-select 支持通过 props 配置各种功能：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------------
----- ------- - -
- ------ -------- ------ --- ------ --
- ------ --------- ------ --- ------- --
- ------ --------- ------ --- ------- -
--
-------- ------------- -
------ -
-------
-----------------
------------------------ -- ----------------------------
------------------- - ------
--
--
-
------ ------- ------------在上面的示例中，我们传递了一个 options 属性，该属性包含要显示的选项的数组，以及一个 onChange 属性，该属性是触发选项更改时的回调函数。
高级用法
异步加载选项
medipass-react-select支持异步加载选项，这使得加载数量巨大的数据集成为可能。我们只需要将 options 属性传递一个带有 promise 的函数，并通过加载选项时显示加载指示器。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- ------------------------
-------- ------------- -
----- ----------- ------------- - ----------------
----- --------------- ----------------- - -------------
-------- ----------------------- -
-------------------
-- ---- ---- ---- ----
-------------------------------------------
-------------- -- ----------------
---------- -- -
--------------------
-----------------------
---
-
------ -
-------
-----------------------
---------------------------
---------------------
------------------- --- -------
--
--
-
------ ------- ------------在上面的示例中，我们传递一个 onInputChange 属性，该属性是每次输入框更改时触发的函数。在该函数中，我们从 API 加载数据，设置 isLoading 状态以显示加载指示器，并将新的选项设置为 loadedOptions 状态。
自定义选项渲染
medipass-react-select 提供了自定义选项渲染的功能。我们可以使用我们自己的组件来渲染选项。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------------
-------- ---------------- ----- ----------- --------- -- -
------ -
----
--------
---------------- ---------- - ------ - --------------
----------- ---------- - ------ - --------
--
-
------------ --------------
------
--
-
------------------------ - -
----- -----------------
------ ----------------------------
------ ---------------------------
--------------
----------- --------------------------
---------- -------------------------
--
-------- ------------- -
----- ------- - -
- ------ -------- ------ --- ------ --
- ------ --------- ------ --- ------- --
- ------ --------- ------ --- ------- -
--
------ -
-------
-----------------
------------------------ -- ----------------------------
------------- ------- -------------- --
------------------- - ------
--
--
-
------ ------- ------------在上面的示例中，我们传递了一个 components 属性，该属性包含一个名为 Option 的组件，该组件用于自定义渲染选择的选项。
结论
medipass-react-select 是一个功能强大的替代品，在性能，可扩展性和用户体验方面，它优于React Select组件。该组件支持异步加载选项和自定义选项渲染，这使得在各种不同的应用程序场景中使用该组件成为可能。愿你在开发React应用程序时喜欢它！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dc81e8991b448e046a