React 自定义穿梭框：打造一个超实用的部门授权管理器

在前端开发中，选择和分配资源是个常见需求，比如给用户授权部门、分配权限组等。今天，我要带你认识一个超酷的 React 自定义组件 TransferCom，它基于 Ant Design 的 Transfer 穿梭框，结合树形结构，完美实现从组织树中挑选部门的动态功能。左侧是未授权部门树，右侧是已授权部门列表，还能动态加载子部门，操作简单又直观。我们会从代码优化入手，再通过一个“部门授权管理器”的 Demo 展示它的魅力。准备好了吗？让我们一起解锁这个穿梭框的秘密吧！

---

组件的核心功能：树形穿梭选择

TransferCom 的任务是：

1. 左侧树形展示：显示未授权的部门树，支持动态加载子节点。
2. 右侧列表展示：显示已授权的部门，简洁明了。
3. 动态交互：支持勾选、切换“只选本级”模式，灵活选择部门。
4. 实时同步：已选部门实时反馈给父组件。

它就像一个“部门搬运工”，帮你轻松在组织树和授权列表之间搬运部门。

---

优化后的代码：从“好用”到“优雅”

1. updateTreeDataSource：树形更新的小能手

interface TreeDataNode {
  key: React.Key;
  title: string;
  userId?: string;
  isLeaf?: boolean;
  children?: TreeDataNode[];
}

function updateTreeDataSource(treeSource: TreeDataNode[], eventKey: React.Key, newChildren: TreeDataNode[]): boolean {
  return treeSource.some((node, i) => {
    if (node.key === eventKey) {
      treeSource[i] = { ...node, children: newChildren };
      return true;
    }
    if (node.children) {
      return updateTreeDataSource(node.children, eventKey, newChildren);
    }
    return false;
  });
}

优化亮点：

• 用 some 替换 for 循环，逻辑更简洁。
• 保留节点原有属性，避免覆盖。
• 返回布尔值明确更新状态。

---

2. TransferComTree组件

import React, { useState, useEffect } from 'react';
import { Transfer, Tree, Switch, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import  './index.less';

interface TreeDataNode {
  key: React.Key;
  title: string;
  id?: string;
  description?: string; // 新增描述
  icon?: React.ReactNode; // 新增图标
  isLeaf?: boolean;
  children?: TreeDataNode[];
}

function updateTreeDataSource(treeSource: TreeDataNode[], eventKey: React.Key, newChildren: TreeDataNode[]): boolean {
  return treeSource.some((node, i) &#