DndKit 拖放转换延迟，使用 Sortable

Question

当我放下一个元素来求助时，会出现一个轻微的过渡问题，即项目回到其原始位置然后过渡。下面我添加了一个视频和代码的链接。

真的，我不想要任何转换延迟等。我觉得这可能是数组的重新映射，但我已经通过尽可能多的优化来测试它并且仍然遇到同样的问题。它在没有过渡属性的情况下工作正常，但希望它能让事情感觉顺畅。

视频链接 --> 视频链接

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import React from 'react';
import Icon from '../../../../../../../common/components/icon/Icon';

interface Props {
   id: number;
   children: React.ReactNode;
}

const SortableItem = ({ id, children }: Props) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: id });

   return (
      <div
         ref={setNodeRef}
         style={{
            transform: CSS.Transform.toString(transform),
            transition,
         }}>
         <div className='grid grid-cols-[60px_auto] items-center w-full h-full relative'>
            {/* Make this the icon grabble */}
            <div
               className='flex items-center w-full h-full cursor-grab'
               data-grab={true}
               {...attributes}
               {...listeners}>
               <Icon name='ArrowsUpDownLeftRight' width={20} height={20} />
            </div>
            {children}
         </div>
      </div>
   );
};

export default SortableItem;

'use client';
import React, { useState } from 'react';
import { ListenService } from '../SmartLinkClient';
import Icon from '../../../../../../common/components/icon/Icon';
import Input from '../../../../../../common/components/input/Input';
import ToggleSwitch from '../../../../../../common/components/toggle-switch/ToggleSwitch';
import Hr from '../../../../../../common/components/hr/Hr';
import { DndContext, PointerSensor, useSensor, useSensors, closestCenter } from '@dnd-kit/core';
import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
import SortableItem from './(edit-services-partials)/SortableItem';

interface Props {
   servicesConfig: ListenService[];
   handleServiceShowToggle: (e: any, elementToChange: ListenService) => void;
   handleServiceDragEnd: (active: any, over: any) => void;
}

const EditServices = ({ servicesConfig, handleServiceShowToggle, handleServiceDragEnd }: Props) => {

   const sensors = useSensors(useSensor(PointerSensor));
   return (
      <div className='select-services'>
         <div className='flex flex-col gap-y-4'>
            <DndContext
               sensors={sensors}
               collisionDetection={closestCenter}
               onDragEnd={({ active, over }) => {
                  handleServiceDragEnd(active, over);
               }}>
               <SortableContext
                  items={servicesConfig.map((service: ListenService) => service.id)}
                  strategy={verticalListSortingStrategy}>
                  {/* Components that use the useSortable hook */}
                  {servicesConfig.map((service: ListenService, i: number) => (
                     <SortableItem key={i} id={service.id}>
                        <div className='grid grid-cols-[minmax(160px,180px)_minmax(200px,auto)_100px] items-center'>
                           <div className='grid grid-cols-[24px_auto] items-center gap-x-3 dark:text-stone-100 text-stone-800'>
                              <Icon name={service.iconName} width={24} height={24} color={service.color} />
                              <span className='text-[16px]'>{service.name}</span>
                           </div>
                           <Input
                              placeholder='We could not find a valid URL, but you can enter your own.'
                              type={'url'}
                           />
                           <div className='justify-self-end -mt-2 flex flex-row items-center gap-x-2'>
                              <span className='text-[11px] text-stone-600 dark:text-stone-300'>Show</span>
                              <ToggleSwitch
                                 toggled={service.show}
                                 handleToggled={(e: any) => {
                                    handleServiceShowToggle(e, service);
                                 }}
                              />
                           </div>
                        </div>
                        {i !== servicesConfig.length - 1 && (
                           <span className='col-span-2'>
                              <Hr />
                           </span>
                        )}
                     </SortableItem>
                  ))}
               </SortableContext>
            </DndContext>
         </div>
      </div>
   );
};

export default EditServices;

Answer 1

我终于搞清楚了。

key

组件上的

<SortableItem />

必须与

id

组件上的

<SortableItem />

相同。奇怪，但有道理。

上一个： 例如）

<SortableItem key={i} id={service.id} />

当前（解决方案）： 例如）

<SortableItem key={service.id} id={service.id} />