简介
hello-react-cascader 是一个基于 React 的级联选择器组件，可以方便快捷地实现多层级别的选择操作。
安装与引用
在命令行中输入如下命令进行安装：
npm install hello-react-cascader --save
安装完成后，在需要使用 hello-react-cascader 的文件中引入组件：
import { Cascader } from 'hello-react-cascader';基本使用
hello-react-cascader 的基本使用非常简单，只需要传入相应的数据和配置项即可。
-- -------------------- ---- -------
------ - -------- - ---- -----------------------
----- ------- - -
-
------ ------
------ -----------
--------- -
- ------ ------ ------ --------- --
- ------ ------ ------ ------- --
- ------ ------ ------ ------ --
--
--
-
------ ------
------ -----------
--------- -
- ------ ------ ------ ---------- --
- ------ ------ ------ -------- --
- ------ ------ ------ --------- --
--
--
--
-------- ----- -
------ -
--------- ----------------- ----------------- --------------- -- ------------------- --
--
-配置项
hello-react-cascader 支持以下配置项：
- options: Array，级联选择的数据源，必要项。
- fieldNames: Object，需要自定义数据源中的 label、value、children 字段名时，可以通过此属性进行配置。
- placeholder: String，输入框的占位符。
- defaultValue: Array，指定默认选中的值。
- value: Array，指定当前选中的值。
- onChange: Function，选中值变化后的回调函数。
高级使用
自定义样式
hello-react-cascader 提供了多个 className，可以自定义样式。
-- -------------------- ---- -------
------ - -------- - ---- -----------------------
----- ------- - -
-
------ ------
------ -----------
--------- -
- ------ ------ ------ --------- --
- ------ ------ ------ ------- --
- ------ ------ ------ ------ --
--
--
-
------ ------
------ -----------
--------- -
- ------ ------ ------ ---------- --
- ------ ------ ------ -------- --
- ------ ------ ------ --------- --
--
--
--
-------- ----- -
------ -
---------
-----------------
-----------------
--------------- -- -------------------
-----------------------------
-----------------------------
--
--
-自定义方向
hello-react-cascader 默认下拉菜单向下弹出，可以通过设置 direction 属性改变弹出方向。
-- -------------------- ---- -------
------ - -------- - ---- -----------------------
----- ------- - -
-
------ ------
------ -----------
--------- -
- ------ ------ ------ --------- --
- ------ ------ ------ ------- --
- ------ ------ ------ ------ --
--
--
-
------ ------
------ -----------
--------- -
- ------ ------ ------ ---------- --
- ------ ------ ------ -------- --
- ------ ------ ------ --------- --
--
--
--
-------- ----- -
------ -
---------
-----------------
-----------------
--------------- -- -------------------
--------------
--
--
-大幅度性能优化范例
针对数据量非常大的情况，我们可以通过在 children 中添加一个函数，动态加载下一级数据，以实现大幅度性能优化。
-- -------------------- ---- -------
------ - -------- - ---- -----------------------
------ - ---------- -------- - ---- --------
-------- ------------ -
------ --- --------------- -- -
------------- -- -
--------
--- -- -- -- ------------ -- --
------ ------ ----------------
------ ----------------------
--------- ----- --- - - -- - --- -- ----------------------------
---
--
-- -----
---
-
----- ------- - -
-
------ ------- ---
------ ----------
--------- --- -- ---------------
--
-
------ ------- ---
------ ----------
--------- --- -- ---------------
--
--
-------- ----- -
----- --------- ----------- - -------------
------------ -- -
---------------------- -- -----------------
-- ----
------ -
---------
-----------------
-----------------
--------------- -- -------------------
--------------
--
--
-总结
通过本篇教程，我们学习了如何使用 npm 包 hello-react-cascader 实现级联选择器的功能。我们还掌握了自定义样式、自定义方向、以及大幅度性能优化等高级技巧。通过深入学习 hello-react-cascader，不仅可以提高自己的编码效率，也能够为以后开发更加复杂的组件积累经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067343890c4f72775836a2