react-tree-th

This is a lightweight component that can be loaded asynchronously, can customize nodes, and so on

Usage no npm install needed!

<script type="module">
  import reactTreeTh from 'https://cdn.skypack.dev/react-tree-th';
</script>

README

一款基于 react 的 tree 组件

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

Tree Demo

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: '三级标题',
          },
        ],
      },
    ],
  },
];

ExpandStyle Props

  • plus
  • triangle

HoverBlock Props

  • inline
  • block