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

最新推荐文章于 2025-05-28 13:31:34 发布

独孤九溅

最新推荐文章于 2025-05-28 13:31:34 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React JavaScript 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43169949/article/details/121303703

JavaScript 同时被 2 个专栏收录

11 篇文章

订阅专栏

React

3 篇文章

订阅专栏

本文介绍了如何在AntDesign的Tree组件中，当数据从后端获取时实现默认选中和展开效果，通过useState和useEffect管理状态并异步处理数据加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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

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