问题标签 [react-beautiful-dnd]

我正在尝试复制 react-beautiful-dnd 教程第 4 步：重新排序列表。据我所知，我已经复制了教程中的代码：https ://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd

但是，当我运行 react 并尝试拖动列表项时，出现如下错误：Unable to find draggable element with id: task-1

如果我查看 DOM，我肯定可以看到具有该 id 的元素：

我无法弄清楚我做错了什么。我将 id 打印到控制台以检查它是否是字符串，并且确实如此。想法？

初始数据.JS

索引.JS

COLUMN.JS

任务.JS

更新状态时，我收到以下错误消息noteList.map is not a function

我有以下设置

src/pages/index.js 我的 DragDropContainer 正在安装的位置

src/components/DragDropContainer.js

src/components/columnDroppable.js

src/utils/notesContext.js

src/components/CustomLinkToDraggable.js这是调用 setNoteAsOpen() 的地方

在setNoteAsOpen()被调用之后，我注意到noteListColumnDroppable 仍然是数组类型，但不是 100% 抛出错误的原因。

我还注意到，在被调用setNoteAsOpen()后openNotes状态仍然相同。setOpenNotes()好像setOpenNotes()没有更新状态。我不确定这是否相关或导致问题，但我想我也会指出这一点。

提前致谢！

我有一个对象数组就是这种格式

我正在使用 react-beautiful-dnd 拖放这个对象数组。我希望能够基于拖放以及 isBox 标志来分配索引。这样做最有效的方法是什么。我很困惑，因为该州没有索引。我是否需要向元素添加索引属性才能做到这一点？

https://codesandbox.io/s/react-beautiful-dnd-tutorial-forked-ij1oq?file=/src/index.js

我正在尝试使用 react-beautiful-dnd 创建一个非常简单的可拖动元素列表。当我尝试使用快照并分配 snapshot.isDragging 的值时，出现错误。

然后我试图给它一个一般的布尔值，仍然出现错误。

我收到一个打字稿错误，说该属性不存在。

下面代码的最终目标（不起作用的部分）：是将 isDragging 属性从快照传递到容器，以便我可以在其上使用样式组件。

样式化的组件部分正在工作（当我在第 31 行弄乱真/假时，我可以看到它改变了颜色）

我大致遵循本指南：https ://egghead.io/lessons/react-customise-the-appearance-of-an-app-during-a-drag-using-react-beautiful-dnd-snapshot-values

但是，他们是在 javascript 中进行的。

我想更改 DragPreviewImage 样式，例如：缩放、填充颜色、在悬停在 DragTarget 上时更改不透明度！

这是我的简短版本示例代码：

1. DragPhoto 组件：

2. DragTarget 组件：

悬停在 div 标签上时如何更改 DragPreviewImage 的样式？

谢谢！

这已经在这里和这里得到了回答，但是在遵循解决方案后我仍然遇到同样的问题。

使用react-beautiful-dnd. showMap是一个布尔值，当单击按钮时从父组件传递。所做showMap的就是

1. 将 3 列网格变为 5，反之亦然
2. 重新排列网格上的项目

我注释掉了里面的依赖useEffect，useCallback因为一旦它们被添加进去，我就会得到一个无限循环。

这是为什么？

注意：当useCallback有一个空的依赖数组并且我记录fakeTrips里面的更新useEffect值是正确的。让我绊倒的是，如果这个警告在某个地方出现问题，该怎么办。我也想知道为什么会这样。

这些是我看到的警告。

我的可拖动元素上有一些可用的数据。我想在 onDragEnd 上使用该数据，但我没有找到传递任何可拖动数据的方法，除了draggableId传递到resultonDragEnd 事件中的数据。

基本上我需要的是可拖动的某种自定义道具，它将显示在 DragDropContext 事件中。就像是：

我想将拖放功能添加到项目分组的网格视图中

使用react-beautiful-dnd看起来一切都很好，但是我没有找到一种方法来自定义源和目标的数据以使它们onDragEnd发挥作用

我总是只是index，，draggableIddroppableId

有没有办法传递更多数据来拖动源？

我为 react-beautiful-dnd github 项目做了一个 fork 并添加了一些功能，但是当我使用 yarn run build我的项目中的新 dist 构建我的 fork 时，我遇到了一个编译问题

我看到我在 npm中的构建和 react-beautiful-dnd npm 提供的构建之间存在差异，但我不明白为什么我会有所不同，或者我没有更改 package.json 文件中的构建配置?

我的 npm 构建的屏幕截图：

react-beautiful-dnd npm 提供的构建截图：

如何解决这个问题？

我遇到了一个非常奇怪的问题，页面上只有一个组件没有被刷新，我就是不知道为什么。

这是该问题的简短视频：

https://i.gyazo.com/45e229b0867c37e48a18da7a55afb522.mp4

请注意当我单击确认时问题字符串如何变化（应该如此），但拖放窗口的卡片保持不变。它一直显示问题名称“yooo”和答案“abc，def”，而这仅对第一个问题有效。

我对 ReactJS 还是比较陌生，所以这里可能有一些我不熟悉的功能？据我所知 DragAndDrop 应该完全用下一个问题重新渲染。目前没有再次调用构造函数，它以某种方式保存了最后一个问题的数据。

此页面的渲染。DragAndDrop 在这里被调用。在 confirm() 中，currentQuestion 被设置为下一个问题。

整个 DragAndDrop.js 对不起代码墙，它与 Beautiful-DND 的示例代码几乎相同https://codesandbox.io/s/k260nyxq9v