React-dnd: v9.3.2でDragDropContextをインポートできません

作成日 2019年07月24日  ·  8コメント  ·  ソース: react-dnd/react-dnd

バグを説明する
dndを7.4.5から9.3.2にアップグレードしましたが、ブラウザがエラーをスローします。

インポートエラーの試行:「DragDropContext」は「react-dnd」からエクスポートされません。 9.3.2で

再生

悪魔

動作を再現する手順:

  1. 「...」に移動します
  2. クリック '....'
  3. 「....」まで下にスクロールします。
  4. エラーを参照してください

予想される行動
何が起こると予想したかについての明確で簡潔な説明。

スクリーンショット
該当する場合は、問題の説明に役立つスクリーンショットを追加してください。
image

デスクトップ(次の情報を入力してください):

  • OS:[例:iOS]
  • ブラウザ[クローム最終バージョン]
  • バージョン[例22]

追加のコンテキスト
ここに問題に関する他のコンテキストを追加します。

最も参考になるコメント

これは私がやったことです

- 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>
+     );
+ };

全てのコメント8件

こんにちは、 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コード

の解き方

このページは役に立ちましたか?
0 / 5 - 0 評価