简介
react-card-tree 是一个基于 React 的可定制化卡片树组件包，支持无限层级的卡片嵌套，适用于展示树形结构的数据。
安装
使用 npm 进行安装：
npm install react-card-tree
使用
在代码中引入 ReactCardTree 组件：
import React from 'react'; import ReactCardTree from 'react-card-tree';
然后，传入数据 props 并渲染组件即可：
-- -------------------- ---- -------
-- ------
----- ---- - -
-
---- ----
------ --------
--------- -
-
---- ----
------ --------
--------- -
-
---- ----
------ --------
--
-
---- ----
------ --------
--
--
--
-
---- ----
------ --------
--------- -
-
---- ----
------ --------
--
-
---- ----
------ --------
--
--
--
--
--
--
-------- ----- -
------ -
-----
--------------
-----------
------------------- -- -
------------------
--
--
------
--
-
------ ------- ----API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | Node[] | [] | 表示树形结构的数据 |
| titleKey | string | 'title' | 节点标题的 key |
| childrenKey | string | 'children' | 子节点数组的 key |
| renderNode | (node: Node, index?: number) => JSX.Element | undefined | 渲染节点的函数，接收每个节点和该节点的索引 |
| onNodeClick | (node: Node, event?: MouseEvent) => void | undefined | 节点点击事件的回调函数，接收节点数据和 MouseEvent 对象 |
| initialOpen | boolean | true | 是否初始展开一级节点 |
| indent | number | 24 | 缩进距离 |
| cardStyle | CSSProperties | {} | 卡片样式 |
| rootCardStyle | CSSProperties | {} | 根节点卡片样式 |
| nodeProps | (key: string) => { [key: string]: any } | undefined | 自定义节点属性，返回一个对象，key 为节点的 key，value 为节点的属性 |
| listProps | { [key: string]: any } | undefined | 自定义列表属性，返回一个对象，属性会被直接传递给 ul 元素 |
Node 数据结构
| 属性 | 类型 | 说明 |
|---|---|---|
| key | string | 唯一标识符 |
| title | ReactNode | 节点标题 |
| children | Node[] | 子节点 |
| [key:string] | {[key:string]:any} | 其他自定义属性 |
示例
自定义节点渲染
-- -------------------- ---- -------
-- ---------
-------- -------- ----- -- -
------ ---- -------- ------ ------ -----------------
-
-------- ----- -
------ -
--------------
-----------
------------------ ------ -- -
------ ------- ------------------ ---
--
--
--
-自定义节点属性
-- -------------------- ---- -------
-------- ----- -
------ -
--------------
-----------
---------------- -- -
-- ---- --- ---- -
------ - ------ - ------ ------ - --
-
--
--
--
-节点点击事件
-- -------------------- ---- -------
-------- ----- -
-------- --------------------- -
------------------
-
------ -
--------------
-----------
-----------------------------
--
--
-总结
react-card-tree 是一个开箱即用的卡片树组件包，便于展示树形结构的数据。它提供了很多可定制化的属性和方法，使得用户可以自由地调整卡片样式和节点内容。通过熟悉它的 API，用户可以快速地实现树形结构的界面渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d581e8991b448e4958