React-tree-th NPM

一款基于 react 的 tree 组件

这是一款轻量的 tree 组件,可以异步加载,可以自定义节点,支持巨量数据渲染等等功能

Props

参数	说明	类型	默认值
className	节点类名	`string`	-
style	节点样式	`CSSProperties`	-
data	数据源	`array<{id, value, [sub, expand, isLeaf]}>`	[]
expandedKeys	展开指定的树节点	`string[]`	-
showLine	是否展示连接线	`boolean`	false
showExpand	是否展示收缩器按钮	`boolean`	true
expandStyle	收缩器按钮类型	`string`	plus
expandColor	收缩器按钮颜色	`string`	rgba(0, 0, 0, 0.4)
lineColor	连接线颜色	`string`	rgba(0, 0, 0, 0.4)
hoverBgColor	鼠标移入颜色(传入 false 则无效果)	`string`	#e1e1fa
hoverBlock	触发鼠标移入的区域	`string`	inline
lineBoxWidth	连接区域宽度	`string`	30px
itemRender	自定义渲染节点	`(nodeData, index, parentData) => ReactNode`	-
itemStyle	节点样式	`CSSProperties`	{ padding: '4px', whiteSpace: 'nowrap' }
defaultExpand	默认是否展开	`boolean`	true
height	开启虚拟滚动	`boolean \| number`	false
itemSize	单行高度	`number`	24
loadData	异步加载数据(节点必须有 isLeaf 属性才可以触发)	`(nodeData) => Promise`	-
onExpand	展开/收起节点时触发	`function(expandedKeys, {expanded: bool, node})`	-
onClick	点击事件	`function(nodeData)`	-
onChange	组件数据变化时触发	`function(nodeData)`	-

Ref

参数	说明	类型	默认值
update	在某些特殊情况下(eg: 自定义渲染节点并且操作节点数据)，需要手动更新组件数据	`() => void`	-
change	在某些特殊情况下(eg: 自定义渲染节点并且操作节点数据)，需要手动向上传递组件数据	`() => void`	-

Data Props

[
  {
    id: '1-1', // key
    value: '一级标题', // 展示文案
    expand: true, // 是否展开
    isLeaf: true, // 设置为叶子节点(设置了 loadData 时有效)。为 false 时会强制将其作为父节点
    sub: [
      // 子节点(非必须)
      {
        id: '2-1',
        value: '二级标题',
        sub: [
          {
            id: '3-1',
            value: '三级标题',
          },
        ],
      },
    ],
  },
];