Может ли кто-нибудь помочь мне превратить кодовую ручку в скрипку с песочницей?

Question

Я создал кодекс с кодом реагирования и импортирую его библиотеки через CDN.Теперь я хочу внедрить этот код (работающий) в мой реактивный проект.Но сначала может быть удобно поместить весь код в изолированную программную среду, чтобы я мог внести изменения перед развертыванием в моем коде.

Я попытался скопировать, вставить весь код в песочницу и добавить все библиотеки (react, react-dnd, reactdndhtml5backend, react-dom), но это все равно дает мне много ошибок.Кроме того, файлы в моем собственном проекте .tsx, а не .js.

Мой текущий кодовый указатель находится здесь: https://codepen.io/darkinfore/pen/daJxyP
Это работает, но только не тогда, когда я внедряю это в реакционную песочницу,Я также попытался внедрить это в реакционную песочницу: https://codesandbox.io/s/w01l077w1w
Но, как вы можете видеть, это вызывает некоторые странные ошибки.

Может ли кто-нибудь помочь мне с преобразованием этого кодового авторучка в реактивную песочницу без ошибок?

Answer 1

Я просмотрел твои коды и окно, а затем разложил его здесь .На самом деле, единственная обнаруженная ошибка была связана с тем, что ReactDnD не был определен (например, DropTarget не может быть найден).Это произошло из-за того, что вы указали оператор импорта в верхней части index.js:

import ReactDnD from "react-dnd";

. Из-за способа создания пакета react-dnd этот способ импорта не будет работать для вас.Пакет имеет несколько экспортов (например, DragDropContext и DropTarget), а не один экспорт по умолчанию.Вам нужно взять все эти экспорты и импортировать их вместе в один импорт с именем ReactDnD.Итак, что вам нужно сделать:

import * as ReactDnD from "react-dnd";

Я сделал это в раздвоенных кодах и в поле , и вы прошли через TypeError, а затем отобразили вашу таблицу.

---

Полезная информация:

• Различные способы использования import
• Экспортированные модули из пакетаact-dnd