介绍
react-selectize-advizr 是一个基于 React 的 UI 组件库，提供多种数据选择方式和样式自定义选项。该组件库主要由两个组件组成：Select 和 MultiSelect。它们都支持异步数据加载、自定义选项和样式控制等功能。
安装
在项目中使用 npm 安装 react-selectize-advizr：
npm install react-selectize-advizr --save
使用
Select
Select 用于单选。
首先，需要导入组件：
import { Select } from 'react-selectize-advizr';然后，根据需要配置传入 props。
-- -------------------- ---- ------- ------- -------------- ---------------- ------------------- ---------------------- -- ----- ------ ----------------------------- -- ------------ ------------------------------------- -- ---------- --------------------- -------------------- --
上述代码中：
id和name分别是 <select> 元素的标识和名称。options显示的选项列表。每个选项都是一个包含value和label两个属性的对象。value当前选中的选项，是一个包含value和label两个属性的对象。onChange选项变更时触发的回调函数，接受两个参数：(selectedOption, action)，selectedOption是当前选中的选项，action是一个字符串，表示操作类型：select-option表示选中了某一项，create-option表示创建了一个新的选项。optionRenderer自定义选项渲染器函数，接受一个option参数，返回一个 React 组件。disabled是否禁用组件。placeholder未选中任何选项时的占位符。
MultiSelect
MultiSelect 用于多选。
首先，需要导入组件：
import { MultiSelect } from 'react-selectize-advizr';然后，根据需要配置传入 props。
-- -------------------- ---- ------- ------------ ------------------- --------------------- ------------------- ------------------------ -- --------- ---------------------------------- -- ------------ ------------------------------------- -- ---------- ----------------------------------- -- ------------ --------------------- ----------------------- --
上述代码中：
id和name分别是 <select> 元素的标识和名称。options显示的选项列表。每个选项都是一个包含value和label两个属性的对象。values当前选中的选项数组，数组中每个元素都是一个包含value和label两个属性的对象。onChange选项变更时触发的回调函数，接受两个参数：(selectedOptions, action)，selectedOptions是当前选中的选项数组，action是一个字符串，表示操作类型：select-option表示选中了某一项，create-option表示创建了一个新的选项。optionRenderer自定义选项渲染器函数，接受一个option参数，返回一个 React 组件。valueRenderer自定义选中选项渲染器函数，接受一个option参数，返回一个 React 组件。disabled是否禁用组件。placeholder未选中任何选项时的占位符。
自定义选项渲染器和选中选项渲染器
通过 optionRenderer 和 valueRenderer 可以自定义选项和选中选项的渲染方式。
-- -------------------- ---- -------
-------- ---------------------------- -
------ -
---- --------------------------
---- ---------------------------------------------
---- ---------------------------------------------------------
------
--
-
-------- --------------------------- -
------ -
---- -------------------------
--------------
---- --------------------------------------------------------
------
--
-上述代码中，我们分别定义了一个自定义选项渲染器和选中选项渲染器。
示例代码
下面是一个完整的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ----------- - ---- -------------------------
----- --------- - -
- ------ -------- ------ ----- ------------ -------- --
- ------ --------- ------ ----- ------------ -------- --
- ------ --------- ------ ----- ------------ -------- --
- ------ ------- ------ ----- ------------ -------- --
--
-------- ----- -
----- ---------------- ------------------ - ---------------
----- ----------------- ------------------- - -------------
-------- ---------------------------------- ------- -
----------------------------------
-
-------- ---------------------------------------- ------- -
------------------------------------
-
-------- ---------------------------- -
------ -
---- --------------------------
---- ---------------------------------------------
---- ---------------------------------------------------------
------
--
-
-------- --------------------------- -
------ -
---- -------------------------
--------------
---- --------------------------------------------------------
------
--
-
------ -
---- ----------------
---------------
-------
--------------
----------------
-------------------
----------------------
-----------------------------
-------------------------------------
--------------------
--
--------------------
------------
-------------------
---------------------
-------------------
------------------------
----------------------------------
-------------------------------------
-----------------------------------
-----------------------
--
------
--
-
------ ------- ----总结
react-selectize-advizr 是一个非常棒的 React UI 组件库，提供了多种数据选择的方式和样式自定义选项。通过本文的介绍，我们可以初步了解其基本使用方式，通过自定义选项渲染器和选中选项渲染器，还可以实现更加个性化的效果。
当然，还有更多的功能尚未展开，希望读者们能够在实战中体验和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727a81e8991b448e8ab8