前言
随着前端技术的不断发展，越来越多的优秀的第三方库和框架出现，为我们前端开发者提供了很多方便和便利。其中，npm 包是应用最广泛的一种，可以通过 npm 包快速安装和使用各种开源工具和库。
本次文章我将介绍一个非常实用的 npm 包 react-multi-picker，它可以帮助我们实现多列的选项选择器，支持联动和自定义。在实际业务中，很多场景都需要使用到类似的组件，比如地区选择、日期时间选择等。
安装和使用
安装
安装 react-multi-picker 很简单，只需要在命令行中输入以下命令即可：
--- ------- ------------------
安装完成后，就可以在项目中愉快地使用它了。
示例代码
------ ----------- ---- ---------------------
----- ---- - -
-
------ ------
------ ------------
--------- -
-
------ ------
------ -----------
--------- -
-
------ ------
------ --------
--
-
------ ------
------ ---------
--
-
------ ------
------ ----------
--
-
------ ------
------ ----------
--
--
--
-
------ ------
------ ------------
--------- -
-
------ ------
------ --------
--
-
------ ------
------ ---------
--
-
------ ------
------ ---------
--
-
------ ------
------ ---------
--
--
--
--
--
--
-------- ---------------------------- -
----------------------------
-
-------- ----- -
------ -
------------
-----------
-----------------------
------------------------------------ ----------- ---------
--
--
-
------ ------- ----参数详解
data
data 是一个必需的参数，它是选项的数据源，必须是一个符合以下格式的数据结构：
-
-
------ ------
------ ---------
--------- -
-
------ ------
------ ---------
--------- -----
-
---
-
--
---
-其中，label 是选项的显示文本，value 是选项的值，children 是选项的子选项（可选）。如果一个选项没有子选项，则可以省略 children 属性。
onChange(selectedValues)
onChange 也是一个必需的参数，它是选择器的回调函数，当用户选择或修改选项时，该函数将被触发。selectedValues 是一个数组，包含了当前所有列的选中值，每一列的选中值都是 value 属性的值。
defaultSelectedValues
defaultSelectedValues 是一个可选的参数，用于指定默认选中的值，它是一个数组，数组的长度必须与列数一致，每个元素都是列对应的选项的 value 属性值。如果省略该参数，则所有列均未选中。
API
setData(data)
setData 用于设置当前选项的数据源，它的参数 data 的格式与 data 参数相同。
setSelectedValues(selectedValues)
setSelectedValues 用于设置当前选中的值，它的参数 selectedValues 是一个数组，数组的长度必须与列数一致，每个元素都是列对应的选项的 value 属性值。
setColumnWidth(widths)
setColumnWidth 用于设置每一列的宽度，它的参数 widths 是一个数组，数组的长度必须与列数一致，每个元素是每一列的宽度（可选单位：px、rem、em）。如果省略该参数，则每一列的宽度将自适应屏幕宽度。
自定义选项
通过设置选项的 renderLabelFn 属性，我们可以自定义选项的样式和内容。renderLabelFn 是一个回调函数，它会传入每个选项的 label 和 value 属性，我们可以利用这些属性来渲染选项。
----- ---- - -
-
------ ------- ---
------ ---------
--------- -
-
------ ------- ---
------ ---------
--------- -
-
------ ------- ---
------ ---------
--------- -
-
------ ------- ---
------ ---------
-------------- ------- ------ -- -
------
-- ------------------- ------------------- --
------- ---------
-------
--
--
--
--
--
--
--
--
--
------------ ----------- --在上面的代码中，我们给第四个选项设置了 renderLabelFn 属性，通过渲染一个带有图标的 span 元素来呈现选项。
联动选择
react-multi-picker 可以很方便地实现联动选择，只需要在 data 数据中设置好每一列选项的父子关系即可。
结语
总结一下，使用 npm 包 react-multi-picker 实现多列选项选择器是非常简单和灵活的。希望本文能够对大家起到一定的帮助作用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f0d9381d61a3540d58