react-dnd 丢弃失败状态

Question

我正在使用react-dnd库来管理拖放，并遇到了感觉上的限制，但我想确保我不只是忽略某些东西。

我有一个实现useDrop的 React 组件，其中useDrop相当复杂的规则canDrop 。 当用户释放鼠标canDrop返回false，我很想能够提供详细的错误信息，让他们知道他们为什么不能放下该项目，但drop不叫（预期的行为，每次的docs )，而且似乎也没有任何方法可以将上下文提供回useDrag处理程序的end函数。

我显然可以从canDrop本身触发错误消息，但是每次拖动都会调用数百次该函数，因此会引入我希望避免的问题，例如去抖动等。

所以我的问题是，我只是遇到了图书馆的限制，还是我错过了某个地方的事件/钩子？

Answer 1

我有同样的问题，这是我的解决方案：

1. canDrop包含复杂的逻辑来确定项目...是否可以丢弃。
2. 将项目 id ( itemId ) 添加到传递给 useDrop 的collect函数中，并使用该 id 根据!canDrop && itemId==='some specific id'的组合来确定要显示的错误消息。

我的 useDrop 钩子：

  const [{ isOver, canDrop, itemId }, drop] = useDrop(
    () => ({
      accept: [{valid ids go here}],
      drop: (item, monitor) => {
        // omitted
      },
      canDrop: (item, monitor) => {
        // canDrop logic
      },
      collect: (monitor) => ({
        isOver: !!monitor.isOver(),
        canDrop: !!monitor.canDrop(),
        itemId: monitor.getItem()?.id,
      }),
    }),
    []
  );

然后在您的组件渲染中：

return (
  <>
    {canDrop && <span>You're good to drop</span>}
    {!canDrop && itemId === 'some condition' && <span>Error message specific to this condition</span>}
    {!canDrop && itemId === 'some other condition' && <span>Error message specific to this condition</span>}
  </>
)

对于我的场景，项目的 id 让我可以确定应该显示的错误消息，但我认为您也可以从collect函数返回整个项目。