Ant Design－Tree

比較少會碰到的元件。

基本用法

沒有任何功能，只單純顯示資料：

import { Tree } from 'antd'
import { DataNode } from 'antd/lib/tree'

const AntdTree = () => {
  const treeData2: DataNode[] = [
    {
      title: 'A',
      key: 'A',
      children: [
        {
          title: 'A-1',
          key: 'A-1'
        },
        {
          title: 'A-2',
          key: 'A-2'
        }
      ]
    },
    {
      title: 'B',
      key: 'B',
      children: [
        {
          title: 'B-1',
          key: 'B-1'
        },
        {
          title: 'B-2',
          key: 'B-2'
        }
      ]
    }
  ]

  return (
    <div>
      <Tree treeData={treeData2} defaultExpandedKeys={['B']} />
    </div>
  )
}

export default AntdTree

一個項目至少會有 title 跟 key 兩個 props，title 是顯示在畫面上的內容，key 則是拿來做操作時的一種參照。例如這邊一開始想讓 B 節點是展開的，就可以把 B 節點的 key 傳入 defaultExpandedKeys 就有這個效果了：

做成 Controlled Component

可以用 expandedKeys 設定展開的項目，再搭配 onExpand 來更新狀態就可以變成受控組件：

import { Tree } from 'antd'
import { DataNode } from 'antd/lib/tree'
import { useState } from 'react'

const AntdTree = () => {
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([])
  const treeData2: DataNode[] = [
    {
      title: 'A',
      key: 'A',
      children: [
        {
          title: 'A-1',
          key: 'A-1',
          children: [
            {
              title: 'A-1-1',
              key: 'A-1-1'
            }
          ]
        },
        {
          title: 'A-2',
          key: 'A-2'
        }
      ]
    },
    {
      title: 'B',
      key: 'B',
      children: [
        {
          title: 'B-1',
          key: 'B-1'
        },
        {
          title: 'B-2',
          key: 'B-2'
        }
      ]
    }
  ]

  function handleExpand(expandedKeysValue: React.Key[]) {
    console.log('expand keys', expandedKeysValue)
    setExpandedKeys(expandedKeysValue)
  }

  return (
    <div>
      <Tree treeData={treeData2} expandedKeys={expandedKeys} onExpand={handleExpand} />
    </div>
  )
}

export default AntdTree

Draggable

要讓節點變成「可拖曳」項目的話要加上 draggable，並且在 onDrop 時來更新節點資料。

底下是一個簡單的範例，比較複雜的部分都是集中在 onDrop 的處理，所以請直接看註解會比較好理解一點：

import { Tree } from 'antd'
import { DataNode, TreeProps } from 'antd/lib/tree'
import { useState } from 'react'

const AntdTree = () => {
  const [treeData, setTreeData] = useState<DataNode[]>([
    {
      title: 'A',
      key: 'A',
      children: [
        {
          title: 'A-1',
          key: 'A-1',
          children: [
            {
              title: 'A-1-1',
              key: 'A-1-1'
            }
          ]
        },
        {
          title: 'A-2',
          key: 'A-2'
        },
        {
          title: 'A-3',
          key: 'A-3'
        },
        {
          title: 'A-4',
          key: 'A-4'
        }
      ]
    },
    {
      title: 'B',
      key: 'B',
      children: [
        {
          title: 'B-1',
          key: 'B-1'
        },
        {
          title: 'B-2',
          key: 'B-2'
        }
      ]
    }
  ])

  // onDrop 會傳入一個 info 參數，裡面可以拿到有用的資訊
  const handleDrop: TreeProps['onDrop'] = (info) => {
    // drag 元素的 key
    const dragKey = info.dragNode.key
    // drog 元素的 key
    const dropKey = info.node.key
    // drop 位置（不精確）
    const dropPos = info.node.pos.split('-')
    // 精確位置（用來判斷是不是頂層第一個位置）
    const realDropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
    // 是不是放到縫隙間
    const isDropToGap = info.dropToGap

    // 用來搜尋節點的 function
    const searchNode = (
      data: DataNode[],
      key: React.Key,
      callback: (nodeData: DataNode, nodeIndex: number, nodeArray: DataNode[]) => void
    ) => {
      for (let i = 0; i < data.length; i++) {
        const isMatchKey = data[i].key === key
        if (isMatchKey) {
          // 找到對應的 key，把資料和位置帶出去
          return callback(data[i], i, data)
        }
        // 子節點存在，用遞迴搜尋
        if (data[i].children) {
          searchNode(data[i].children!, key, callback)
        }
      }
    }

    // 複製原本的資料
    const newTreeData = JSON.parse(JSON.stringify(treeData))

    let dragObj: DataNode

    // 把 dragKey（被拖拉的節點）傳入，找出對應節點和位置
    searchNode(newTreeData, dragKey, (nodeData, nodeIndex, nodeArray) => {
      // 把被拖拉的節點從陣列中刪除
      nodeArray.splice(nodeIndex, 1)
      // 儲存被拖拉的節點資料
      dragObj = nodeData
      console.log('dragObj', dragObj)
    })

    // 如果不是插到中間
    if (!isDropToGap) {
      // 把 dropKey（目標節點）傳入，找出對應節點陣列（因為不是插入所以不需要位置）
      searchNode(newTreeData, dropKey, (nodeData) => {
        // 如果 drop 的節點陣列有 children 就用它的，沒有就建立一個新的（空陣列）
        nodeData.children = nodeData.children || []
        // 把 drag 節點放到最前面的位置
        nodeData.children.unshift(dragObj)
      })
    }
    // 如果是插到中間
    else {
      // 把 dropKey（目標節點）傳入，找出節點陣列和位置
      searchNode(newTreeData, dropKey, (nodeData, nodeIndex, nodeArray) => {
        console.log('nodeArray', nodeArray)
        console.log('dropDataIndex', nodeIndex)
        // -1 代表最頂層的第一個位置
        if (realDropPosition === -1) {
          // 放到目標節點前面
          nodeArray.splice(nodeIndex, 0, dragObj)
        } else {
          // 放到目標節點後面
          nodeArray.splice(nodeIndex + 1, 0, dragObj)
        }
      })
    }

    setTreeData(newTreeData)
  }

  return (
    <div>
      <Tree treeData={treeData} selectable={false} onDrop={handleDrop} draggable blockNode />
    </div>
  )
}

export default AntdTree

實際範例可以參考 CodeSandbox