问题标签 [react-dnd]

我在我的应用程序中使用 React DnD 进行拖放。反应 DnD

我需要知道如何实现拖动预览并在拖动时定位它。

我正在尝试遵循 React DND Chess 教程（很简单），但我的一段代码似乎遇到了障碍。当我声明它时，我收到一条错误消息，指出 connectDragSource 不是函数，如下面的代码所示。在过去的一天中，我尝试对其进行故障排除，并且已经用完了潜在客户。如果它有帮助，我正在使用 React-Redux-Universal 锅炉，但我怀疑这是否会通过我的路线和孩子被渲染造成任何问题。

组件代码：

家庭组件代码：

应用代码：

我被困在如何拖动组件时，我的控制台告诉我，当它被声明为 const 时，我未能清除渲染函数中的 propType { connectDragSource, isDraggin } = this.props;。我注意到如果我从 KnightSource 对象中删除 is Dragging 属性，它会修复此错误，但我不知道为什么。

我正在创建一个 Web 应用程序，它允许用户在屏幕上拖放多个片段，每个片段都包含单独的特定数据。如果用户想要在屏幕上添加更多片段，他们只需单击一个按钮，另一个片段就会出现。我使用 React DND（Drag and Drap）库来保持我的组件解耦，到目前为止效果很好。问题在于在屏幕上添加更多片段的动态功能。目前（在下面的子代码中），我正在获取旧状态对象，执行浅拷贝，并将新创建的对象与预先存在的状态对象合并，并在完成时更新状态。但是，每次我执行此操作时，一切正常（屏幕上生成新片段），直到我移动一个新片段并出现以下错误：

在现有状态转换期间无法更新（例如在 内render）。渲染方法应该是 props 和 state 的纯函数。

我怎样才能摆脱这个错误，并更新状态对象。

注意：按钮（在下面的屏幕截图中）显示 State 对象中对象数量的当前计数。所以下面我在状态中添加了 7 个对象

应用截图： 家长：

孩子：

我想实现一个放置系统，如果放置目标是嵌套的，您可以使用鼠标滚轮在它们之间循环（或在一定时间后发生自动循环）这将特别有用，因为许多嵌套目标占据屏幕上完全相同的区域。

我目前在想，我可以使用从容器传递下来的回调，当它们的悬停函数被调用/当 isOver 道具发生变化时，放置目标可以使用该回调来注册/取消注册自己，但它非常耦合，我必须通过从容器中将道具放入 DropTargets，在现实世界的应用程序中，容器和放置目标之间会有未知数量的级别，所以我可能不得不设置某种回调系统，总的来说它不是一个理想的解决方案。此外，我不确定如何在循环时确保正确的顺序，因为放置目标不知道它们的嵌套程度（请参阅下面的代码了解我是如何实现的）。有没有更清洁的方法来实现这样的系统？

我正在尝试调用我的 React 类中定义的“hello”方法。我在组件上的道具设置为从学生状态对象中读取值，其中一个属性名为“hello”。hello 属性是来自 john 默认属性的 init。每当 john 默认道具设置为除属性之外的任何内容时，我注销该对象时，它都会正确显示。但是当我尝试从 john 属性中调用我的“hello”方法时，什么也没有发生（它应该注销单词“hello”。我的问题是，你是否允许从 React 的默认属性或初始化状态中调用方法方法？如果是这样，我是否正确实施了该模式，如果不是，我该如何解决？

旁注：如果您想知道我正在使用的库，它是 React-Drag & Drop（用于使用 React 解耦拖放接口）

代码：

我正在使用反应-dnd。我想知道当前悬停的目标是在 dnd dom 对象的有序列表中拖动的源之前还是之后，并将其作为 css 类传递给 dom 对象。我希望能够为我自己的自定义函数比较源和目标之间的道具。

如何创建自定义源-目标-关系函数（如 isOver、canDrop 等）？我想创建一个 isBeforeDraggedSource() 函数。

亲爱的 StackOverflow 的人们，

我正在尝试在 React-Rails 应用程序中实现拖放功能。但是，只要将 DragDropContext 添加到顶级组件，我就会在浏览器控制台中看到此错误：

'react.self-0f0e88a....js?body=1:1087 未捕获错误：不变违规：addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。您可能正在向未在组件render方法中创建的组件添加 ref，或者您加载了多个 React 副本

这是我目前拥有的应用程序的唯一代码：

添加这一行代码会导致我们所有的 PhantomJS 集成测试失败。任何帮助，将不胜感激。谢谢！

编辑：根据要求，这里是我们渲染 App 的 index.html.erb。

我正在构建一个应用程序，可让您通过拖放来组织表情符号。我有一个在 drop 上运行的方法，可以对大量表情符号对象进行排序。当我运行 setState 并将对象提交回父组件的状态时，React 会从 DOM 中删除父组件。它只是消失了......控制台中没有错误，使用反应开发工具我可以看到组件状态实际上已经用新对象更新。任何帮助将非常感激。

这种排序机制通过 props 将更新后的对象发送到它的父组件：

对象数组如下所示：

整个事情都被添加到父级的状态中，当它这样做时，组件被删除而没有错误。

任何信息将不胜感激，谢谢！

我正在尝试测试我的 react-dnd 实现，并且在我的一个 drop 函数中，我正在使用该monitor.getInitialClientOffset()函数来获取偏移量，并且我想存根此方法以返回一个特定的偏移量，然后我可以断言上，但我无法弄清楚这一点。在我的测试中，我正在使用

（这是使用来自https://gaearon.github.io/react-dnd/docs-testing.html的标准 wrapInTestContext ）

drop 函数是从测试后端传递给一个监视器的，我在文档中看不到将它的存根版本传递给任何模拟方法的方法。