Tree 树形控件

用于展示层级结构的数据，如目录、组织架构等。

基础用法

import { Tree } from '@airo-ui/react'

function Demo() {
  const treeData = [
    {
      label: '一级节点 1',
      children: [
        { label: '二级节点 1-1' },
        { label: '二级节点 1-2' },
      ],
    },
    {
      label: '一级节点 2',
      children: [
        { label: '二级节点 2-1' },
        { label: '二级节点 2-2' },
      ],
    },
  ]

  return <Tree data={treeData} />
}

自定义节点标识

通过 nodeKey 指定节点的唯一标识字段。

import { Tree } from '@airo-ui/react'

function Demo() {
  const treeData = [
    {
      id: 'n1',
      label: '一级节点 1',
      children: [
        { id: 'n1-1', label: '二级节点 1-1' },
        { id: 'n1-2', label: '二级节点 1-2' },
      ],
    },
  ]

  return <Tree data={treeData} nodeKey="id" />
}

节点点击

通过 onNodeClick 监听节点点击事件。

import { Tree } from '@airo-ui/react'

function Demo() {
  const treeData = [
    {
      label: '文档',
      children: [
        { label: '前端' },
        { label: '后端' },
      ],
    },
  ]

  return (
    <Tree
      data={treeData}
      onNodeClick={(node, path) => {
        console.log('点击了节点:', node.label)
        console.log('节点路径:', path)
      }}
    />
  )
}

复杂层级

支持任意深度的嵌套数据。

import { Tree } from '@airo-ui/react'

function Demo() {
  const treeData = [
    {
      label: '公司',
      children: [
        {
          label: '技术部',
          children: [
            { label: '前端组' },
            { label: '后端组' },
          ],
        },
        {
          label: '产品部',
          children: [
            { label: '产品组 A' },
            { label: '产品组 B' },
          ],
        },
      ],
    },
  ]

  return <Tree data={treeData} />
}

API

Props

名称	类型	默认值	说明
data	TreeNodeData[]	—	树形数据（必填）
nodeKey	string	—	节点唯一标识的字段名
onNodeClick	(node: TreeNodeData, path: string) => void	—	节点点击时触发

TreeNodeData

属性	类型	说明
label	string	节点显示文本
children	TreeNodeData[]	子节点数组