有人可以帮助我将Codepen转换为React Sandbox小提琴吗？

Question

我创建了一个带有React代码的Codepen，并将其库通过CDN导入。
现在，我想在我的react项目中实现此代码（工作中）。
但是首先，将所有代码放入React沙箱可能很方便，这样我可以在部署到我的代码之前进行更改。

我试图将所有代码复制粘贴到沙箱中并添加所有库(react, react-dnd, reactdndhtml5backend, react-dom)，但它仍然给我带来很多错误。 另外，我自己项目中的文件是.tsx，而不是.js。

在这里找到我当前的Codepen：https://codepen.io/darkinfore/pen/daJxyP
这有效，但是当我将其实现到react沙箱中时不起作用。
我还尝试将其实现到react沙箱中：https://codesandbox.io/s/w01l077w1w
但是如您所见，它给了我一些奇怪的错误。

有人可以帮助我将此Codepen转换为无错误的反应沙箱吗？

Answer 1

我查看了您的密码和框，然后查看了forked it here。实际上，遇到的唯一错误与未定义ReactDnD有关（因此找不到DropTarget）。这是由于您在index.js顶部附近的import语句所致：

import ReactDnD from "react-dnd";

由于react-dnd软件包的设计方式，这种导入方式对您不起作用。该程序包具有多个导出（例如DragDropContext和DropTarget），而不是单个默认导出。您需要进行所有这些导出并将它们一起导入一个名为ReactDnD的命名导入中。因此，您需要做的是：

import * as ReactDnD from "react-dnd";

我在forked codesandbox中进行了此操作，这使您越过TypeError，然后显示了表格。

---

有用的信息：

• Different ways to use import
• Exported modules from react-dnd package