如何写一个 React Tree 组件

Github：https://github.com/noxxxxxxxx/tree

一个简单的 React 树组件，可以按照以下步骤进行：

1. 创建一个新的 React 组件：
   使用类组件或函数组件创建一个新的 React 组件，用于表示树组件。

2. 定义组件的状态：
   在组件的构造函数或使用 useState 钩子函数中定义组件的状态。状态可以用来存储树的数据和展开/折叠状态。

3. 渲染树节点：
   在组件的 render 方法中，使用递归的方式渲染树的节点。根据树的数据结构，可以使用 map 方法遍历节点，并根据节点的子节点递归调用渲染方法。

4. 处理展开/折叠事件：
   在树节点上添加展开/折叠事件处理程序。这可以通过添加点击事件监听器来实现。在事件处理程序中，更新组件状态以反映节点的展开/折叠状态，并重新渲染组件。

5. 添加样式和交互效果：
   使用 CSS 或样式库为树组件添加样式，并根据需要添加交互效果，例如高亮选中节点、展示节点图标等。

下面是一个简单的 React 树组件的示例代码：

import React, { useState } from 'react';

const TreeNode = ({ node, onToggle }) => {
  const [isOpen, setIsOpen] = useState(false);
  
  const handleToggle = () => {
    setIsOpen(!isOpen);
    onToggle(node.id);
  };
  
  return (
    <div>
      <div onClick={handleToggle}>
        {node.name}
      </div>
      
      {isOpen && node.children.map(childNode => (
        <TreeNode key={childNode.id} node={childNode} onToggle={onToggle} />
      ))}
    </div>
  );
};

const Tree = ({ data }) => {
  const [expandedNodes, setExpandedNodes] = useState([]);
  
  const handleToggle = nodeId => {
    if (expandedNodes.includes(nodeId)) {
      setExpandedNodes(expandedNodes.filter(id => id !== nodeId));
    } else {
      setExpandedNodes([...expandedNodes, nodeId]);
    }
  };
  
  return (
    <div>
      {data.map(node => (
        <TreeNode key={node.id} node={node} onToggle={handleToggle} />
      ))}
    </div>
  );
};

export default Tree;

在上面的代码中，Tree 组件接收一个包含树节点数据的 data 属性。每个树节点由 TreeNode 组件表示。通过递归调用 TreeNode 组件，可以渲染整个树。单击树节点时，切换节点的展开/折叠状态，并通过 onToggle 回调函数更新父组件的展开节点列表

但在实际业务中，比方说低代码场景下，我们的 Tree 组件是需要可以拖拽，可以被插入，删除节点操作的，而现有的 UI 库中的 Tree 组件大多臃肿、维护不及时，因此还是需要自己实现。