问题标签 [react-dnd]

当我在没有包装“div”标签的情况下渲染这个组件时，ui 工作正常。

但是，为了使用 react-drag-and-drop，我必须将它包装在一个“div”中，以便出于某种原因返回它。当我应用 div 标签时，它会缩小到原始大小的 75%。

这个^ 组件的名称是 Hoop。你可以在这里看到它的渲染。

我怎样才能使 Hoop 完全填充其父 div？我正在使用语义 UI 的网格布局。

编辑：你可以在这里看到整个组件系统 --> https://github.com/ammark47/PersonalWebsite/tree/master/src/components

您好，我正在按照此示例中的代码制作类似的组件。我的组件按预期工作（拖放时排序正确）但是当我拖动卡片时，不透明度 0 必须跟随拖动元素以“感觉”，就像在 ReactDnD 示例中一样。

看我的作品

和我的代码

我正在使用 react-dnd，它们的大部分内部函数component都作为参数，因此我们可以确定该函数中的组件大小和内容。Component提供对组件本身的引用，因此我们可以执行getDOMNode(component).getWhatever().

然而，canDrop不幸的是，该函数没有接收到这个参数。我正在尝试使用组件参数来确定canDrop函数内部的位置。由于我不能使用文档推荐的组件参数：

组件：指定时，它是您的组件的实例。使用它来访问底层 DOM 节点以进行位置或大小测量，或者调用 setState 和其他组件方法。它故意从 canDrop 中丢失，因为实例在被调用时可能不可用。如果你想让这个方法依赖于组件的状态，可以考虑将状态提升到父组件，这样就可以只使用 props 了。通常，如果您尽可能依赖道具，您的代码会更干净。

我不确定如何将组件本身提升到其父级，以便我可以将它作为道具传递回自身。你能给我一个发生这种情况的例子吗？

在我的组件中，有已付款和已丢弃物品的本地状态。

我指定了如下的丢弃规范，

drop(props, monitor) { const orderItem = monitor.getItem(); },

我想要做的是，当 anorderItem被放到目标上时，它会orderItem进入状态droppedItems所以要做到这一点，我做了handleDrop函数

像这样称呼它

在我的渲染函数中，有const { canDrop, connectDropTarget, getItem} = this.props;

以下是来自console.log(this.props)

Object { id: 1, order: Object, channel: undefined, dispatch: routerMiddleware/</</<(), connectDropTarget: wrapHookToRecognizeElement/<(), canDrop: false, itemType: "order_item", getItem: Object

虽然它识别出有一个丢弃的项目，但它不会推送到该状态。

我怎样才能推Object到getItem组件的状态？我在这里做错了什么？

提前致谢

在使用react-dnd和使用updatereact ('react/lib/update') 的实用程序时，结构如下：

state = { data : { items : [] /* array of 'fields' (flat objects items), and 'groups' (object that may have nested 'fields' under 'group.nested') */ } }

update在尝试field从items数组移动到组（对象nested中的数组）时，我注意到该实用程序存在一些问题group。

我尝试删除该字段（使用splice），然后将其添加到嵌套数组中。该update函数的结果返回了该组，该字段嵌套在其中，尽管该字段并未从声明的原始位置中删除$splice。

您可以在下面找到带有该问题的详细示例的 RunKit

https://runkit.com/592da/splice-react-update-issue

很高兴收到任何建议或任何更好的实践解决方案。

谢谢 ！

我有一个特定的 Web 应用程序，在其中拖动鼠标滚轮可以节省大量时间。代码是用 React 编写的，带有 React DnD ( https://github.com/react-dnd/react-dnd ) 和 HTML5 后端。

不幸的是，拖动时鼠标滚轮无法按预期工作。我研究了这个问题并没有找到通用的解决方案。此处描述了该问题：https ://github.com/react-dnd/react-dnd/issues/49 。我还发现了仅适用于所有主要浏览器（谷歌浏览器和拖动滚动）的 macOS的解决方案/hack。它在 Windows 上不起作用。我试图通过在滚动事件上更改窗口的位置来破解它，但它似乎被阻止了。

你有什么解决办法吗？编写自定义后端有帮助吗？不幸的是，我还没有找到任何可以提供帮助的现成可用的后端。

我正在构建一个多级可嵌套拖放列表。每个嵌套列表只需要允许在其内部拖动。type这需要为DragSourceand设置运行时DropTarget。

编译时type声明有效但受到限制

运行时type声明似乎有效，但在拖动时会引发错误

我有table，它是按x价值和y价值定位的。这些值保存在数据库中。我正在使用 react dnd 来定位这些table。

我现在要做的是一键保存所有表格位置。为此，我编写了如下代码..

<button onClick={this.saveTables}>Save</button>

因此，当安装组件时，我将表的所有信息放入this.state.tables. 因此，对于saveTables()功能，我想做的是通过映射this.state.tables调度操作来保存每个表x的位置。y但是，它会触发错误TypeError: action is undefined

可以像上面那样做吗？还是有其他方法可以一键保存所有表格数据？

提前致谢..

--编辑完整错误

TypeError: action is undefined[Learn More] app.js:54241:1 routerMiddleware/</</< http://localhost:4000/js/app.js:54241:1 saveTables/< http://localhost:4000/js/app.js:73190:9 map self-hosted saveTables http://localhost:4000/js/app.js:73184:7 bound saveTables self-hosted bound bound saveTables self-hosted ReactErrorUtils.invokeGuardedCallback http://localhost:4000/js/app.js:45316:7 executeDispatch http://localhost:4000/js/app.js:39166:5 executeDispatchesInOrder http://localhost:4000/js/app.js:39189:5 executeDispatchesAndRelease http://localhost:4000/js/app.js:38581:5 executeDispatchesAndReleaseTopLevel http://localhost:4000/js/app.js:38592:10 forEach self-hosted forEachAccumulated http://localhost:4000/js/app.js:50930:5 EventPluginHub.processEventQueue http://localhost:4000/js/app.js:38795:7 runEventQueueInBatch http://localhost:4000/js/app.js:45345:3 ReactEventEmitterMixin.handleTopLevel http://localhost:4000/js/app.js:45356:5 handleTopLevelImpl http://localhost:4000/js/app.js:45438:5 TransactionImpl.perform http://localhost:4000/js/app.js:50185:13 ReactDefaultBatchingStrategy.batchedUpdates http://localhost:4000/js/app.js:45084:14 batchedUpdates http://localhost:4000/js/app.js:48223:10 ReactEventListener.dispatchEvent http://localhost:4000/js/app.js:45513:7 bound

我正在尝试使用Material UI的and集成React DnD，并且在拖动时，整个列表显示为拖动的元素。我试图尽我所能理解这些例子，这就是我所拥有的ListListItem

基本上，我用List和SortableList代替ListItem，SortableListItem这是我在拖动时看到的

我究竟做错了什么？

编辑

例如，这里是一个示例用法

或者

等等

它不会改变任何事情。

那个游戏是用 react 和 redux 开发的。我不是 react-redux 开发者（我是 .net 开发者），但我必须继续那个项目，所以我是 react 和 redux 的新手。游戏性能在某些 android 手机中太差了。所以我分析项目。我看到组件渲染方法每秒都在工作。我的组件包含 30 多个其他组件。所以每秒钟都会重新渲染，这会导致一些旧的 android 手机性能不佳

为什么 React 组件每秒重新渲染一次？我可以阻止这个吗？我搜索那个问题我看到解决方案是 shouldComponentUpdate 函数

但是在这个函数中 nextstate 和这个 state 是一样的，nextProps.gameStore.get('state') 和 this.props.gameStore.get('state') 是一样的。为什么下一个 state 和 current state 是一样的呢？我应该怎么做做什么？我使用构造函数，但它仍然相同这是我所有的组件代码

编辑：使用 Aftab Khan 指令，我将组件更改为 PureComponent 但页面未打开且控制台中没有错误

我把它改成

但它仍然不起作用然后我将其更改为

但它仍然没有在浏览器中打开