React中如何让嵌套组件通过唯一id关联（跨组移动不重建）

数据结构 #

type GroupType = {
    id: number // 始终唯一
    type: "group"
    groups: (GroupType | OtherType)[]
}

type OtherType = {
    id: number // 始终唯一，跨类型也唯一
    type: "other"
    text: string
}

当前组件实现 #

type Props = {
    group: GroupType
}

export default function Group({ group }: Props) {
    const elements = group.groups.map(ele => {
        if (ele.type === "other") return <p key={ele.id}>{ele.text}</p>
        else return <Group key={ele.id} group={ele} />
    })

    return (
        <div>
            {elements}
        </div>
    )
}

现有问题 #

当GroupType.groups内的元素在同组内重排时，React可以通过key正确复用组件；但将元素从一个GroupType.groups移动到另一个组时，由于React仅识别同级元素的key，会将该元素视为新组件进行重建。

示例：初始时key=3的组件是key=2组的子元素，若将其移动到key=2组的同级位置，React会重建该组件，导致键盘焦点丢失，影响无障碍导航体验。

解决方案 #

核心思路是将所有可移动元素的渲染提升到同一层级，通过CSS模拟层级结构，而非用React组件嵌套实现分组。这样所有元素处于同级，React就能通过全局唯一的id作为key，在跨组移动时正确复用组件，避免重建。

具体实现步骤 #

1. 扁平化数据结构：把嵌套的GroupType和OtherType数据转换成扁平列表，同时保留每个元素的层级信息（用于CSS缩进）。
2. 统一渲染所有元素：在根组件中渲染扁平列表，根据元素层级添加对应样式。
3. 维护层级状态：元素跨组移动时，更新其层级信息即可，无需改变组件嵌套结构。

代码示例 #

1. 扁平化工具函数

type FlattenedItem = (GroupType | OtherType) & {
  depth: number;
};

function flattenGroups(group: GroupType, depth = 0): FlattenedItem[] {
  let result: FlattenedItem[] = [];
  // 添加当前组本身（如需渲染组容器）
  result.push({ ...group, depth });
  // 递归处理子元素
  group.groups.forEach(item => {
    if (item.type === "group") {
      result = [...result, ...flattenGroups(item, depth + 1)];
    } else {
      result.push({ ...item, depth });
    }
  });
  return result;
}

2. 根组件渲染扁平列表

type RootProps = {
  rootGroup: GroupType;
};

export default function Root({ rootGroup }: RootProps) {
  const flattenedItems = flattenGroups(rootGroup);

  return (
    <div className="group-container">
      {flattenedItems.map(item => {
        if (item.type === "other") {
          return (
            <p 
              key={item.id}
              style={{ marginLeft: `${item.depth * 20}px` }}
            >
              {item.text}
            </p>
          );
        } else {
          return (
            <div 
              key={item.id}
              style={{ 
                marginLeft: `${item.depth * 20}px`,
                fontWeight: "bold"
              }}
            >
              Group {item.id}
            </div>
          );
        }
      })}
    </div>
  );
}

替代方案：React Portals（保留嵌套DOM结构时使用）

如果必须保留嵌套DOM结构，可通过React Portals将可移动元素挂载到同一个父容器，原位置渲染占位符。这种方式能让React认为元素始终处于同级，实现复用，但复杂度较高，优先推荐扁平化方案。

关键说明 #

• 利用全局唯一的id作为key，确保React能在任意位置识别同一元素。
• 通过CSS模拟层级打破组件嵌套对复用的限制，组件实例不会被销毁重建，焦点状态得以保留。

内容的提问来源于stack exchange，提问作者Space.yg