Может ли кто-нибудь помочь мне преобразовать codepen в реагирующую песочницу?
Я создал codepen с реагирующим кодом и импортирую его библиотеки через CDN.
Теперь я хочу внедрить этот код (работающий) в свой проект реагирования.
Но сначала было бы удобно поместить весь код в песочницу реакции, чтобы я мог внести изменения перед развертыванием в своем коде.
Я пытался скопировать весь код в песочницу и добавить все библиотеки (react, react-dnd, reactdndhtml5backend, react-dom), но все равно выдает много ошибок.
Также файлы в моем собственном проекте имеют .tsx, а не .js.
Мой текущий codepen находится здесь: https://codepen.io/darkinfore/pen/daJxyP
Это работает, но только не тогда, когда я реализую это в песочнице реагирования.
Я также пытался реализовать это в тестовой песочнице: https://codesandbox.io/s/w01l077w1w
Но, как вы можете видеть, это дает мне некоторые странные ошибки.
Может ли кто-нибудь помочь мне без ошибок преобразовать этот codepen в реактивную песочницу?
Ответы 1
Я просмотрел ваши коды и ящик, а затем разветвил это здесь. На самом деле, единственная обнаруженная ошибка была связана с тем, что ReactDnD не был определен (так что DropTarget не мог быть найден). Это произошло из-за вашего оператора импорта в верхней части index.js:
import ReactDnD from "react-dnd";
Из-за того, как устроен пакет react-dnd, этот способ импорта вам не подойдет. Пакет имеет несколько экспортов (например, DragDropContext и DropTarget), а не один экспорт по умолчанию. Вам нужно взять все эти экспорты и импортировать их вместе в один именованный импорт, который называется ReactDnD. Итак, что вам нужно сделать, это:
import * as ReactDnD from "react-dnd";
Я сделал это в разветвленные кодыибокс, и это помогло вам обойти TypeError, а затем отобразить вашу таблицу.
Полезная информация: