React-dnd: HTML5Backend는 드래그 이벤트에서 표시/사라지는 DOM 요소가 있는 경우 드래그를 중지합니다. CHROME

이 문제에 대해 많은 독서를 통해 해결 방법을 찾았습니다. 구성 요소를 통해 전달하는 시간 제한 및 상태 변수를 설정합니다. 이 간단한 경우에는 하기 쉽지만 복잡하기 때문에 그다지 좋아하지 않습니다. 모든 것이 작동하도록 컨텍스트 또는 이와 유사한 것을 사용해야 하는 경우.
https://codesandbox.io/s/react-dnd-sortable-holes-vxeus

더 나은 솔루션을 안내해 주셨으면 합니다. 이 해결 방법 대신 라이브러리에서 isDragging을 사용하고 싶습니다.

우리 팀은 드래그 앤 드롭 공급자를 위한 사용자 지정 후크를 만드는 상태 해결 방법을 개선했습니다. 이 문제에 직면한 사람이 있을 경우 여기에 버그가 해결되는 동안 솔루션이 있습니다.

https://codesandbox.io/s/react-dnd-sortable-gaps-custom-9tl13

주요 부분은 드래그 상태를 저장할 컨텍스트와 공급자를 정의하는 것으로 구성됩니다.

const DndContext = React.createContext([{}, () => {}]);

const DndCustomProvider = props => {
  const [state, setState] = useState({ dragging: false });

  return (
    <DndProvider backend={props.backend}>
      <DndContext.Provider value={[state, setState]}>
        {props.children}
      </DndContext.Provider>
    </DndProvider>
  );
};

둘째, 끌기 시작 기능에서 setTimeout을 사용하면 끝이 디스패치되는 것을 피할 수 있습니다.

  const [context, setContext] = useContext(DndContext);

  const [collected, dragRef] = useDrag({
    ...,
    begin: monitor => {
      setTimeout(() => {
        setContext(() => ({ dragging: true }));
      }, 0);

      if (begin) {
        begin(monitor);
      }
    },
    end: (item, monitor) => {
      setContext(() => ({ dragging: false }));

      if (end) {
        end(item, monitor);
      }
    },
    ...
  });

  return [
    {
      ...collected,
      isDragging: context.dragging
    },
    dragRef
  ];

그리고 마지막으로 isDragging 수집된 값을 컨텍스트 값으로 덮어씁니다.

이러한 해결 방법이 포함되지 않은 이 문제에 대한 패치에 대한 솔루션이나 아이디어가 있는 사람이 있습니까?