Ant Design的Tree组件如何根据父节点展开状态自动展开子节点？

这问题我遇到过，Ant Design的Tree确实不会默认展开子节点。给你个简单粗暴的解决方案，监听展开事件然后递归处理子节点就行。

拿去改改：

function expandAllChildren(expandedKeys, {node}) {

  const childKeys = [];

  const loop = (nodes) => {

    nodes.forEach(item => {

      childKeys.push(item.key);

      if (item.children) {

        loop(item.children);

      }

    });

  };

  if (node.children) {

    loop(node.children);

  }

  return [...new Set([...expandedKeys, ...childKeys])];

}



// 组件里这么用


  defaultExpandedKeys={['parent1']}

  onExpand={(expandedKeys, info) => {

    setExpandedKeys(expandAllChildren(expandedKeys, info));

  }}

/>

原理就是每次展开父节点时，把它的所有子节点key都加进去。new Set是为了去重，避免重复添加。

动态加载数据的情况也适用，因为每次展开都会重新计算子节点。虽然有点暴力，但实测有效，比手动维护key列表省心多了。

要实现父节点展开时自动展开所有子节点层级，根本原因是 Ant Design 的 Tree 组件本身并没有内置递归展开子节点的逻辑，defaultExpandedKeys 只是一个静态配置，无法动态响应数据变化。我们需要自己处理这个逻辑。

解决这个问题可以分以下几个步骤：

第一步，监听 onExpand 事件。这个事件会在用户点击展开/折叠节点时触发，回调参数会包含当前展开的所有节点 key 列表以及触发事件的具体节点信息。我们可以通过这个事件来动态计算需要展开的子节点。

第二步，递归获取所有子节点的 key。当某个父节点被展开时，我们需要找到它下面所有的子节点（包括多层嵌套的子节点），然后把这些 key 都加入到展开列表中。

第三步，更新 expandedKeys 状态。因为 defaultExpandedKeys 是静态的，只在组件初始化时生效，所以我们需要用受控的 expandedKeys 属性来动态控制展开状态。

下面是具体的代码实现：

import React, { useState } from 'react';

import { Tree } from 'antd';



const { TreeNode } = Tree;



// 辅助函数：递归获取所有子节点的 key

const getAllChildKeys = (treeData, key) => {

  const findNode = (data, targetKey) => {

    for (const node of data) {

      if (node.key === targetKey) {

        return node;

      }

      if (node.children) {

        const result = findNode(node.children, targetKey);

        if (result) return result;

      }

    }

    return null;

  };



  const extractKeys = (node) => {

    let keys = [];

    if (node.children) {

      node.children.forEach(child => {

        keys.push(child.key);

        keys = keys.concat(extractKeys(child));

      });

    }

    return keys;

  };



  const targetNode = findNode(treeData, key);

  return targetNode ? extractKeys(targetNode) : [];

};



const MyTree = () => {

  const [expandedKeys, setExpandedKeys] = useState([]);

  const treeData = [

    { title: 'Parent 1', key: 'parent1', children: [

      { title: 'Child 1', key: 'child1', children: [

        { title: 'Grandchild 1', key: 'grandchild1' }

      ]},

      { title: 'Child 2', key: 'child2' }

    ]}

  ];



  const onExpand = (newExpandedKeys, info) => {

    // 如果是展开操作

    if (info.expanded) {

      const allChildKeys = getAllChildKeys(treeData, info.node.key);

      // 合并当前展开的 key 和新的子节点 key

      const updatedKeys = Array.from(new Set([...newExpandedKeys, ...allChildKeys]));

      setExpandedKeys(updatedKeys);

    } else {

      // 如果是折叠操作，直接使用新的 expandedKeys

      setExpandedKeys(newExpandedKeys);

    }

  };



  return (

    <Tree

      treeData={treeData}

      expandedKeys={expandedKeys}

      onExpand={onExpand}

    />

  );

};



export default MyTree;

代码说明一下：
- getAllChildKeys 是一个递归函数，用来找到某个节点下所有子节点的 key。这是核心逻辑，因为我们必须知道哪些子节点需要被展开。
- 在 onExpand 中，判断当前操作是展开还是折叠。如果是展开，就调用 getAllChildKeys 获取所有子节点 key，然后合并到现有的 expandedKeys 中；如果是折叠，直接更新为新的 expandedKeys。
- 使用 expandedKeys 而不是 defaultExpandedKeys，是因为后者是静态的，无法动态响应数据变化。

这样写的好处是，即使你的树形结构是动态加载的，也可以通过调整 treeData 来保证逻辑的正确性。只需要确保 treeData 的结构完整，展开逻辑就能正常工作。

吐槽一句，这种需求其实挺常见的，Ant Design 官方如果能直接提供一个类似 autoExpandChildren 的属性就省事多了，可惜目前只能自己手动实现。