React-dnd: 用于嵌套可排序示例的 React DnD 设置？

创建于 2015-11-12 · 7评论 · 资料来源: react-dnd/react-dnd

我正在使用 react-dnd 处理嵌套列表组件，并且使用了简单的可排序示例。我可以让第一级节点的拖放工作，但是所有孩子在尝试拖动时都会产生“TypeError：节点未定义”。基本上我有一个菜单组件和一个项目组件，如果它有孩子，项目组件会调用自己。

您有嵌套可排序列表的示例吗？

资料来源

3Cbwaltz

最有用的评论

@3Cbwaltz好的，看看这个： https ://github.com/tamagokun/example-react-dnd-nested

您将对app/components/Tree app/components/Item和app/containers/Index最感兴趣，以了解一切是如何设置的。我想可能会有很多改进，但我希望它有所帮助。

tamagokun 于 2016-01-13

👍36 🎉7 👎4 ❤3 😕3

所有7条评论

如果您有错误，请生成一个重现此错误的示例。
我希望我能从错误消息中猜出发生了什么，但可惜我不能。：眨眼：

gaearon 于 2015-11-16

干得好：
http://stackoverflow.com/questions/33659180/react-dnd-not-sure-how-to-get-drag-and-drop-to-fire-for-nested-components-of-t

如果您还需要什么，请告诉我。

3Cbwaltz 于 2015-11-16

我正在开发的应用程序中有一个有效的嵌套可排序设置。

我将努力清理它并把它扔到 Github 上。

tamagokun 于 2015-12-18

@3Cbwaltz

我复制粘贴了您的示例，但无法运行。它没有解释data道具应该是什么样的。不幸的是，如果您不提供一个完整的项目（指定依赖项等）来重现它，我就无法诊断您的问题。我将关闭此问题，但如果您让我能够在不手动复制粘贴文件并发现其中没有足够信息的情况下查看最新情况，我很高兴重新打开。

gaearon 于 2015-12-25

@tamagokun你说你有一个嵌套的可排序示例吗？我已经能够进一步充实我的组件，但仍然没有时间将我的头包裹在嵌套的可排序对象上。这是完整源代码的链接https://bitbucket.org/bwaltz6/flow-builder/overview。抱歉，代码很多，您可能无法编译它，因为它使用的是公司特定的 npm 存储库。如果需要，我可以磨练它。感兴趣的文件在这里：

包装器
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/FlowBuilder.js?at=master&fileviewer=file-view-default

菜单
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/menu.js?at=master&fileviewer=file-view-default

节点项
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/nodeItem.js?at=master&fileviewer=file-view-default

我想我现在需要做的是在 nodeItem 的<li>中添加一个<ul>标记并将其作为放置目标。我挂断的地方是，我的 nodeItems 已经是放置目标和拖动源，我想要做的就是能够在 ul ...在 nodeItem 内重复这一点。不知道如何做那部分。我需要做某种继承吗？

3Cbwaltz 于 2016-01-12

让我弄点东西...

tamagokun 于 2016-01-12