reactjs - How to stop DND Kit from rendering divs - Stack Overflow

admin管理员组

文章数量:1277896

I am using two different dnd kit DndContext providers in a table. One to rearrange the columns of the header, one to drag & drop rows.

Now I get a console error that divs are not allowed as children in a thead/tbody.

The problem is, the DndContext for some reason renders divs into the thead:

<thead className="sticky top-0 bg-white z-10">
  <tr id="table-headers_0" className="group">
    <th>Size</th>
    <th>File name</th>
  </tr>
  <div id="DndDescribedBy-5" style="display: none;">
    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.
  </div>
  <div id="DndLiveRegion-3" role="status" aria-live="assertive" aria-atomic="true"
     style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;"></div>
</thead>

My corresponding code:

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

Does anyone know how I can get it to not render the divs?

本文标签： reactjsHow to stop DND Kit from rendering divsStack Overflow