バグを説明する
dndを7.4.5から9.3.2にアップグレードしましたが、ブラウザがエラーをスローします。
インポートエラーの試行:「DragDropContext」は「react-dnd」からエクスポートされません。 9.3.2で
再生
動作を再現する手順:
予想される行動
何が起こると予想したかについての明確で簡潔な説明。
スクリーンショット
該当する場合は、問題の説明に役立つスクリーンショットを追加してください。
デスクトップ(次の情報を入力してください):
追加のコンテキスト
ここに問題に関する他のコンテキストを追加します。
こんにちは、 DragDropContext
はバージョン9以降削除されましたhttps://github.com/react-dnd/react-dnd/pull/1439
こんにちは、
DragDropContext
はバージョン9#1439以降削除されました
ああthx
これが削除されたので、移行パスは何ですか?
皆さん、9.xバージョンの重大な変更に関する移行ガイドはありますか?
皆さん、9.xバージョンの重大な変更に関する移行ガイドはありますか?
いいえ、ドキュメントを更新するように作成者に通知できます。
これは私がやったことです
- import { DragDropContext } from "react-dnd";
- import HTML5Backend from "react-dnd-html5-backend";
-
- export const withDragDropContext = DragDropContext(HTML5Backend);
+ import * as React from "react";
+ import HTML5Backend from "react-dnd-html5-backend";
+ import { DndProvider } from "react-dnd";
+
+ export const withDragDropContext = <TProps extends {}>(Component: React.ComponentClass<TProps> | React.StatelessComponent<TProps>) =>
+ {
+ return (props: TProps) => (
+ <DndProvider backend={HTML5Backend}>
+ <Component {...props} />
+ </DndProvider>
+ );
+ };
グーグルをしている人にとって、これは役立つかもしれません:
これは動作しません
import { createDndContext, DndProvider } from "react-dnd";
import Backend from "react-dnd-html5-backend";
// ...
const DndContext = createDndContext(Backend);
// ...
const MyComponent = () => (
<DndProvider backend={Backend} context={DndContext}>
/* ... */
</DndProvider>
);
繰り返しますが、それは機能しません
代わりにこれを行います:
import { createDndContext, DndProvider } from "react-dnd";
import Backend from "react-dnd-html5-backend";
// ...
const DndContext = createDndContext(Backend);
// ...
const myComponent = () => (
const managerRef = useRef(DndContext);
<DndProvider backend={Backend} manager={managerRef.current.dragDropManager}>
/* ... */
</DndProvider>
)
ソース: Dndコード
の解き方
最も参考になるコメント
これは私がやったことです