介绍
在前端开发中，下拉树控件是经常使用的控件之一。@beisen-platform/dropdown-tree 是一种基于 React 的开源下拉树控件，提供了非常便利的功能，能够实现多选、异步加载、搜索等特性。
本文章将带您深入了解 npm 包 @beisen-platform/dropdown-tree 如何使用，包含详细的教程、示例代码，以及指导意义。
安装
在您的项目目录下，使用如下命令安装 @beisen-platform/dropdown-tree：
npm install @beisen-platform/dropdown-tree
使用
下面是一个简单的示例，让您快速了解如何使用 @beisen-platform/dropdown-tree：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ -------------- ---- ---------------------------------
----- ---- - -
-
--- --
------ ------
--------- -
-
--- ---
------ --------
--
-
--- ---
------ --------
--------- --
--- ----
------ ----------
--
-
--
--
-
--- --
------ ------
--------- -
-
--- ---
------ --------
-
-
-
--
-------- ----- -
----- ------------- --------------- - -------------
----- ----------------------- - -------- -- -
-----------------------
-
------ -
---- ----------------
------------- ----------- ------------------------- --------------------------------------------- --
------
--
-
------ ------- ----data：下拉树的数据源selectedIds：当前选中的节点 id 列表，可以是空数组或者未定义。如果要在初始化时选中一些节点，可以把它们的 id 填入这个数组。onSelectedIdsChange：当选中的节点列表发生变化时，发生的回调函数。该函数接受一个参数，即新的选中的节点列表。
在以上示例中，当选中的节点列表发生变化时，setSelectedIds 函数会被调用，属性的值会被更新。同时，下拉树组件也会自动更新选中状态。
属性
在 @beisen-platform/dropdown-tree 中，还可以通过传入各种属性来实现更多功能。以下是所有属性的详细介绍：
data
用于指定下拉树的数据源。该属性必须包含该树的所有节点（包括子节点），同时也需要指定每个节点的 id、label、children。
{
id: 1, // 节点的唯一标识符
label: '选项1', // 节点的显示文本
children: [...], // 子节点数组，元素类型需要和父节点一样
}如果某个节点不包含子节点，可以只设置 id 和 label。
selectedIds
用于指定当前选中的节点 id 列表，接受一个数组。
onSelectedIdsChange
在选中的节点列表发生变化时触发的回调函数，接受一个参数：新的选中的节点列表。该函数可以用于更细粒度的逻辑，例如在选中一个节点时自动选中它的所有子节点。
labelProp
用于指定每个节点上显示的文本的属性名。
valueProp
用于指定每个节点上保存的值的属性名。
childrenProp
用于指定包含子节点的属性名。
parentIdProp
用于指定包含父节点 id 的属性名。
disabledIds
用于指定不可操作的节点 id 列表，接受一个值为数组。被指定的节点将无法被选中或展开。
defaultExpandAll
用于指定节点是否默认展开。当值为 true 时，节点将默认全部展开。反之，节点默认全部折叠。默认为 false。
indent
用于指定节点之间的缩进量。默认为 24。
selectable
用于启用或禁用节点的选择操作。当值为 false 时，节点将处于只读状态。默认为 true。
multiple
用于启用或禁用多选操作。当值为 true 时，用户可以在选中多个节点。反之，用户将只能选中单个节点。默认为 false。
async
用于开启异步加载数据的能力。当值为 true 时，节点在被展开时将向服务器异步加载内容。默认为 false。
asyncDataSource
用于指定异步加载数据的来源。具体使用详见下一节。
showSearch
用于控制是否展示搜索框。默认为 false。
异步加载数据
使用 @beisen-platform/dropdown-tree 开发者可以非常方便地实现异步加载数据。只需要填写 asyncDataSource 属性和 onAsyncLoad 属性即可。
以下示例是与上面的示例相比，添加了异步加载的功能。在选中某个节点时，被选中的节点的所有子节点将从服务器获取并展示。
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ -------------- ---- ---------------------------------
----- ------------------ - -- -- -
-- ------
------ --- --------------- -- -
------------- -- -
----- ---- - ---
-- --- --- -- -
-----------
--- ---
------ --------
---
-----------
--- ---
------ ---------------
------ -----
---
- ---- -- --- --- --- -
-----------
--- ----
------ ----------
---
-
--------------
-- ------
---
--
----- ---- - -
-
--- --
------ ------
--------- -
-
--- ---
------ --------
--
-
--- ---
------ ---------------
------ -----
-
--
--
-
--- --
------ ------
--------- -
-
--- ---
------ --------
-
-
-
--
-------- ----- -
----- ------------- --------------- - -------------
----- ----------------------- - -------- -- -
-----------------------
--
----- ----------- - ----- ------ -- -
----- -------- - ----- ----------------------------
------------- - ---------
--
------ -
---- ----------------
-------------
-----------
-------------------------
---------------------------------------------
------------
----------------------- -- ------------------
--
------
--
-
------ ------- ----在以上示例中，async 属性设置为 true。当展开节点时，若该节点的 async 属性也设置为 true，则该节点将从服务器异步获取数据。
同时，asyncDataSource 属性指定了异步加载的数据来源，这里的 getAsyncDataSource 函数用于从服务器获取数据。该函数返回一个 Promise 对象。
在 onAsyncLoad 回调函数中，异步加载的内容会被添加到节点的 children 属性中。但是要注意，当新添加的子节点也需要异步加载时，也需要使用 onAsyncLoad 函数并返回 Promise。
结论
在本文中，我们详细的介绍了 npm 包 @beisen-platform/dropdown-tree 使用教程，包括了安装、使用方法、属性等方面的讲解，以及涉及到异步加载数据怎么实现。
前端开发中，下拉树控件是非常经常使用的一个组件，@beisen-platform/dropdown-tree 提供了非常便利的功能，能够实现多选、异步加载、搜索等特性，具有非常高的实用性和扩展性。相信在实际的前端开发中，掌握 @beisen-platform/dropdown-tree 使用方法将是非常有价值的。
完整示例代码：https://codesandbox.io/s/beisen-platformdropdown-tree-demo-ry620
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067368890c4f727758404e