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

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

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

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

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

Источник

1 ответ

Решение

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

import ReactDnD from "react-dnd";

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

import * as ReactDnD from "react-dnd";

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

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

Источник
Другие вопросы по тегам