求助：为react-organizational-chart节点添加折叠功能（适配现有代码）

要给你的组织结构图节点添加折叠功能，核心是通过状态管理每个节点的展开/折叠状态，并根据状态控制子节点的渲染。以下是适配你现有代码的完整实现方案：

核心思路 #

1. 用状态存储每个节点的折叠状态
2. 给有子节点的节点添加折叠切换按钮
3. 根据状态决定是否渲染子节点

完整代码示例 #

import { useState } from 'react';
import { Tree, TreeNode } from 'react-organizational-chart';

// 示例数据结构（请替换为你的实际数据）
const data = [
  {
    name: '部门A',
    child: [
      { name: '小组A1' },
      { name: '小组A2', child: [{ name: '成员A2-1' }] }
    ]
  },
  { name: '部门B' }
];

const getLabel = (name, hasChildren, toggleCollapse, isCollapsed) => {
  return (
    <div className="card">
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        {/* 仅给有子节点的节点显示折叠按钮 */}
        {hasChildren && (
          <button onClick={() => toggleCollapse(name)} style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
            {isCollapsed ? '▸' : '▾'}
          </button>
        )}
        {name}
      </div>
      <div>
        hello
        <button onClick={() => console.log(`clicked ${name}`)}>clickme</button>
      </div>
      <div className="box">N</div>
    </div>
  );
};

const getTreenode = (child, collapsedNodes, toggleCollapse) => {
  return child?.map((obj) => {
    const hasChildren = !!obj.child?.length;
    const isCollapsed = collapsedNodes[obj.name];
    
    return (
      <TreeNode 
        key={obj.name}
        label={getLabel(obj.name, hasChildren, toggleCollapse, isCollapsed)}
      >
        {/* 非折叠状态且有子节点时才渲染子节点 */}
        {!isCollapsed && obj.child && getTreenode(obj.child, collapsedNodes, toggleCollapse)}
      </TreeNode>
    );
  });
};

const StyledTreeExample = () => {
  // 初始化折叠状态：默认所有节点展开
  const [collapsedNodes, setCollapsedNodes] = useState({});

  // 切换节点折叠状态的函数
  const toggleCollapse = (nodeName) => {
    setCollapsedNodes(prev => ({
      ...prev,
      [nodeName]: !prev[nodeName]
    }));
  };

  return (
    <Tree
      className="root"
      lineWidth={"2px"}
      lineColor={"green"}
      lineBorderRadius={"10px"}
      label={<div className="card">Root</div>}
    >
      {getTreenode(data, collapsedNodes, toggleCollapse)}
    </Tree>
  );
};

export default StyledTreeExample;

关键逻辑说明 #

• 状态管理：collapsedNodes对象以节点name为键，存储每个节点的折叠状态（true为折叠，false为展开）
• 折叠按钮：仅当节点存在子节点时显示，点击后触发状态切换
• 子节点渲染控制：在递归生成节点时，判断当前节点状态，仅展开状态下渲染子节点

可选优化 #

• 如果节点有唯一id，建议用id代替name作为状态键，避免同名节点冲突
• 可自定义折叠按钮的样式，替换默认的箭头符号

内容的提问来源于stack exchange，提问作者Nagween Jaffer