如何防止 react js 和 react-beautiful-dnd 中的原始容器丢失?

在使用 react-beautiful-dnd 进行拖拽操作时，有时原始容器会在拖拽之后丢失。这可能会导致一些功能的异常或崩溃。为了避免这种情况的发生，我们需要采取一些预防措施。

如何防止原始容器丢失？

1. 不要对原始容器进行修改

在 react-beautiful-dnd 中，我们需要对需要进行拖拽操作的容器进行包装。在包装容器时，我们必须避免对原始容器进行任何修改，例如添加或删除某些元素。

2. 在包装容器中保存原始容器的引用

为了能够在拖拽完成后找到原始容器，我们需要在包装容器中保存原始容器的引用。可以使用 React 的 useRef 钩子来保存原始容器的引用。下面是一个示例：

import React, { useRef } from 'react';
import { Droppable } from 'react-beautiful-dnd';

const MyComponent = () => {
  const droppableRef = useRef(null);

  return (
    <Droppable droppableId="my-droppable" ref={droppableRef}>
      {(provided) => (
        <div ref={provided.innerRef}>
          {/* 此处是原始容器的内容 */}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
};

在上面的示例中，我们使用 useRef 钩子创建了一个 droppableRef 变量，并将其传递给了 <Droppable> 组件的 ref 属性。在 <Droppable> 内部，我们用 provided.innerRef 将原始容器的引用传递给了包装容器。

请注意，我们还可以使用 provided.placeholder 来提供拖拽时的占位符。

3. 在拖拽结束后恢复原始容器的位置

当拖拽操作结束后，我们需要将原始容器恢复到其正确的位置，以避免其丢失。为此，在 <Droppable> 组件上添加 onDragEnd 事件处理程序，并在其中设置原始容器的位置。

const MyComponent = () => {
  const droppableRef = useRef(null);

  const handleDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    // 恢复原始容器的位置
    droppableRef.current.appendChild(result.draggable);
  };

  return (
    <Droppable droppableId="my-droppable" ref={droppableRef} onDragEnd={handleDragEnd}>
      {(provided) => (
        <div ref={provided.innerRef}>
          {/* 此处是原始容器的内容 */}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
};

在上面的示例中，我们添加了一个名为 handleDragEnd 的事件处理程序，并在其中将 result.draggable 添加到了原始容器中。

结论

在使用 react-beautiful-dnd 进行拖拽操作时，我们需要避免对原始容器进行修改，并在包装容器中保存原始容器的引用。同时，在拖拽结束后，我们还需要将原始容器恢复到其正确的位置，以避免其丢失。