Ant Design：轻松实现Tree组件的展开收缩操作

前端

2023-02-22 04:54:59

Ant Design Tree 组件的展开与收缩：掌控你的树形数据

在构建复杂的用户界面时，展现结构化数据往往至关重要。Ant Design 的 Tree 组件为呈现层次结构数据提供了强大的解决方案，而其展开和收缩操作更是锦上添花。掌控这些操作的精髓，将使你轻松创建动态、交互性强的树形视图。

认识 expandedKeys 和 onExpand

展开和收缩操作的幕后英雄当属两个关键属性：expandedKeys 和 onExpand。

expandedKeys： 掌控展开状态。它是一个数组，其中包含已展开节点的键值，让你精确控制哪些节点处于展开状态。
onExpand： 响应节点操作。该事件处理函数会在节点展开或收缩时触发，为你提供更新 Tree 组件状态的途径。

父子组件的默契配合

在父组件中，你可以巧妙地操纵子组件 Tree 的展开状态。通过使用 onClick 事件处理函数调用子组件的 onExpand 函数，就能随心所欲地控制节点的展开与收缩。

示例代码：掌握实际操作

理论结合实践，让我们深入一个示例代码，直观感受 expandedKeys 和 onExpand 的实际运用：

import { Tree } from 'antd';

const treeData = [
  {
    title: 'Node 1',
    key: '1',
    children: [
      {
        title: 'Child Node 1-1',
        key: '1-1',
      },
      {
        title: 'Child Node 1-2',
        key: '1-2',
      },
    ],
  },
  {
    title: 'Node 2',
    key: '2',
  },
];

const App = () => {
  const [expandedKeys, setExpandedKeys] = useState([]);

  const onExpand = (expandedKeysValue) => {
    setExpandedKeys(expandedKeysValue);
  };

  return (
    <Tree
      expandedKeys={expandedKeys}
      onExpand={onExpand}
      treeData={treeData}
    />
  );
};

export default App;

在这个代码中，我们使用 useState 管理 expandedKeys 状态。当用户点击树形结构的节点时，onExpand 函数被调用，更新 expandedKeys 状态，从而实现节点的展开和收缩。

常见问题解答：你的疑问，我的解答

如何动态控制节点展开状态？

使用 expandedKeys 和 onExpand 属性，你可以随时更新树形结构的展开状态。
如何在父组件中控制子组件 Tree 的展开？

通过在父组件的 onClick 事件处理函数中调用子组件的 onExpand 函数，你可以轻松实现这一目的。
如何初始化展开的节点？

在设置 expandedKeys 属性时指定默认的展开键值即可。
展开后如何获取子节点信息？

在 onExpand 函数中，expandedKeysValue 参数包含了展开节点的子节点信息。
如何禁用节点的展开/收缩？

在 Tree 组件中设置 draggable 属性为 false，即可禁用节点的展开/收缩。