如何阻止DND Kit在表格thead中渲染div元素

DND Kit的DndContext默认会渲染两个用于无障碍支持的辅助div：一个是描述拖拽操作说明的DndDescribedBy，另一个是实时反馈拖拽状态的DndLiveRegion。但把DndContext放在thead内部时，这两个div会直接成为thead的子元素，违反了HTML规范（thead的直接子元素只能是<tr>、<template>等，不能是<div>），从而触发控制台报错。

以下是几种可行的解决方法：

1. 把DndContext移到thead外部 #

这是最直接且推荐的方案，将DndContext包裹在整个表格或者thead的父元素外层，让辅助div渲染在合法的DOM结构位置，不会破坏thead的结构：

<DndContext
  collisionDetection={closestCenter}
  modifiers={[restrictToHorizontalAxis]}
  onDragEnd={handleThDragEnd}
  sensors={sensors}
>
  <thead>
    {table.getHeaderGroups().map(({id, headers}) => (
      <tr key={id}>
        {headers.map(header => {
          const {id, column, getContext} = header;
          return (
            <SortableContext
              key={id}
              items={columnOrder}
              strategy={horizontalListSortingStrategy}
            >
              <th>
                {flexRender(column.columnDef.header, getContext())}
              </th>
            </SortableContext>
          );
        })}
      </tr>
    ))}
  </thead>
</DndContext>

2. 自定义辅助元素的挂载位置 #

如果业务场景要求DndContext必须靠近thead，可以通过DndContext的liveRegion和describedBy属性，指定辅助元素挂载到页面其他合法容器（比如body）中：

首先在组件中创建并挂载辅助容器：

useEffect(() => {
  // 创建实时区域元素
  const liveRegion = document.createElement('div');
  liveRegion.setAttribute('role', 'status');
  liveRegion.setAttribute('aria-live', 'assertive');
  liveRegion.setAttribute('aria-atomic', 'true');
  liveRegion.style.cssText = 'position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(100%); white-space: nowrap;';
  
  // 创建描述区域元素
  const describedBy = document.createElement('div');
  describedBy.textContent = 'To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.';
  describedBy.style.display = 'none';
  
  // 添加到body
  document.body.appendChild(liveRegion);
  document.body.appendChild(describedBy);
  
  // 组件卸载时清理
  return () => {
    document.body.removeChild(liveRegion);
    document.body.removeChild(describedBy);
  };
}, []);

然后在DndContext中指定这些元素：

<thead>
  <DndContext
    collisionDetection={closestCenter}
    modifiers={[restrictToHorizontalAxis]}
    onDragEnd={handleThDragEnd}
    sensors={sensors}
    liveRegion={() => document.querySelector('[role="status"][aria-live="assertive"]')}
    describedBy={() => document.querySelector('div[style="display: none;"]')}
  >
    {/* 表头内容 */}
  </DndContext>
</thead>

3. 禁用无障碍辅助元素（不推荐） #

如果完全不需要无障碍支持，可以通过返回null来禁用这两个辅助元素，但这会降低组件的可访问性，仅适合特殊场景：

<DndContext
  collisionDetection={closestCenter}
  modifiers={[restrictToHorizontalAxis]}
  onDragEnd={handleThDragEnd}
  sensors={sensors}
  liveRegion={() => null}
  describedBy={() => null}
>
  {/* 表头内容 */}
</DndContext>

内容的提问来源于stack exchange，提问作者Andresch Serj