关于Ant Design＜React＞中的tree组件默认选中事件

在Ant Design中的Tree组件，如果数据是前端写死的，使用里面的默认展开，默认选中事件，直接调用文档的API即可，如果数据是从后端获取的，那么就需要作一些改动。

import { getDep } from '@/api/api'
import { useState, useEffect } from 'react'
import { Tree } from 'antd'
const Dep = () => {
  const [loading, setLoading] = useState<boolean>(true)
  const [list, setList] = useState<any>([])
  const [defaultSelectedKeys, setDefaultSelectedKeys] = useState<string[]>([])
  const [defaultExpandedKeys, setDefaultExpandedKeys] = useState<string[]>([])
  useEffect(() => {
    getDep({ dep: '10' })
      .then((res: any) => {
        if (res.code === 0) {
          const data = res.data
          setDefaultExpandedKeys(data.defaultExpandedKey)
          setDefaultSelectedKeys(data.defaultSelectedKey)
          setList(data.list)
        }
        setLoading(false)
      })
      .catch(() => {
        setLoading(false)
      })
  }, [])
  return (
    <>
      {loading ? null : (
        <Tree
          treeData={list}
          height={400}
          defaultSelectedKeys={defaultSelectedKeys}
          defaultExpandedKeys={defaultExpandedKeys}
        />
      )}
    </>
  )
}

export default Dep

也就是说 ，当数据来自后端的时候，要等拿到数据后再生成组件，这样才会有默认选中及默认展开的效果！