问题标签 [react-beautiful-dnd]

我正在开发一个使用 Firebase(Cloud Firestore)、Redux 和 React-beautiful-DnD 的反应应用程序。

这是gif图像

每当我将 ToDo-Task 移动到另一列时，都会发生闪光。我认为原因是一次向 Cloud Firestore 调用多个请求。这是我用来向 Cloud Firestore 请求 update() 的代码。

注意：虽然我使用了“事务”，但我不愿意使用它，因为处理需要很长时间才能从 Cloud Functions 中捕获数据。虽然也使用了“批处理”，但同样发生了闪光。

以下是我在项目中使用的依赖项：

我想通过编写两个包含可以在它们之间拖动的子元素的 div 框来学习 React Beautiful Dnd。所有（大多数？）在线教程都是带有循环和状态的 Trello 克隆，这使我对基础知识的理解变得混乱。我想通过仅对所需的最小状态进行硬编码来简化我的理解，最终结果是两个组件（组件名称为“Column”），每个组件都包含一个 div（一个名为“Task”的组件），我可以将其拖到其他。

眼下。我收到错误“TypeError：children is not a function”。

这是我的代码：

src/App.js

src/组件/列

src/组件/任务

在下面的代码中，UI 呈现了两个“列”组件，每列包含两个称为“任务”的可拖动元素。当用户在列之间拖动“任务”时，代码可以工作到一个点。当用户不断拖动任务组件时，最终它们将停止拖动，并且用户收到一条错误消息：

无法找到 id 的可拖动对象：X

我不知道为什么会发生这种情况，也不知道如何解决。

注意：我假设库的工作方式是当您拖动元素时需要重新排序和更新onDragEnd函数中的状态。

这是我的代码：

应用程序.js

src/helper_functions

src/组件/列

src/组件/任务

我正在使用拖放元素创建一个可拖动列表，问题是 DND 元素的动画从指针移动，导致拖动到其他拖放元素时出现问题。 https://codesandbox.io/s/green-microservice-j7h9v?fontsize=14&hidenavigation=1&theme=dark 在这里我编写了一个我想要实现的示例，它还有一些其他不重要的错误。

我有 bean 遵循 egghead.io 的 react-beautiful-dnd 官方教程。在第 5 课中，坚持重新排序我的实现总是抛出一个错误，但只有当我第二次尝试重新排序顶部项目时。当我第一次重新订购时它工作正常。

这是我专门针对这个问题的分支：https ://github.com/bogdan-marian/my-react-beautiful-dnd/tree/002-property-id-question

我第二次订购时遇到的错误是：

我无法发现我的实施有什么问题。

react-beautiful-dnd我正在尝试使用和react-virtuoso（具有自动计算项目大小的虚拟列表）来实现具有虚拟列表和不同大小项目的 Trello 。

react-virtuoso不是示例的一部分beautiful-react-dnd，我面临两个问题：

• 拖动项目时无法滚动
• 我经常收到这个错误：Invariant failed: Can only recollect Droppable client for Droppables that have a scroll container.

这是一个代码框

DroppableList.tsx

项目.tsx

数据.ts

我试图在react 上使用这个react dndtypescript。示例不适用于类型脚本项目，任何人都知道如何在反应类型脚本上正确执行此操作

我正在使用react-beautiful-dnd：

我的理解是，Draggable它将有多种事件侦听器，以允许它检测何时单击/单击和拖动/等。

Slider我正在使用的组件也将具有类似的事件（因为我假设它提供了与 类似的事件侦听器Draggable）。

我怎么能：

1. 忽略react-beautiful-dnd某些目标发出的事件

或者

2. 停止事件传播以便react-beautiful-dnd不接收事件？

下面的屏幕截图显示了两个滑块 - (1) 一个 React 组件 ( material-ui) 和 (2) 一个<input type="range" />组件。正常范围可以正常工作（不会触发拖放），而 Slider 则不会。

演示我的问题的视频：https ://i.imgur.com/L3laZLc.mp4

我有一个简单的应用程序，您可以在其中将卡片添加到 2 个不同的行。当一张卡片被添加到一行时，我react-transition-group用来触发一个“进入”动画。

但是，我还react-beautiful-dnd安装了启用在行之间拖动卡片，并重新排序行本身。但是当一张卡片被移动到一个新的行时，或者当这些行被重新排序时，一些卡片的“进入”动画会触发，这看起来很奇怪，不应该发生。

拖动时，不需要的动画会触发

1. 一张卡片被拖到不同的行。

2. A Row 被重新排序，并且 2 Row 有不同数量的卡片。

奇怪的是，不需要的动画不会发生

1. 卡片被拖到其原始行中的新位置。
2. 行重新排序并且行具有相同数量的卡。

我想知道我怎样才能拥有它，这样react-transition-group当state使用react-beautiful-dnd.

我的问题的沙箱（文件中的评论中的更多信息App.js）：

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-tc40w?fontsize=14&hidenavigation=1&theme=dark

我有一个 react-beautiful-dnd 列表中的材料 ui 卡列表。我希望能够将卡片从一个列表移动到另一个列表并重新组织它们（这已经完成）。例如，我还希望能够单击卡片的右下角并根据需要调整其大小。那可能吗？如果是这样，怎么做？我曾尝试将卡片包装在 react-grid-layout 对象之类的东西中，但没有成功，而我的 react 应用程序仍然出现，卡片没有呈现。

提前感谢您的帮助。