React-dnd: Tidak dapat mengimpor DragDropContext di v9.3.2

Dibuat pada 24 Jul 2019 · 8Komentar · Sumber: react-dnd/react-dnd

Jelaskan bugnya
Saya memutakhirkan dnd dari 7.4.5 ke 9.3.2, tetapi browser membuat kesalahan:

Kesalahan impor yang dicoba: 'DragDropContext' tidak diekspor dari 'react-dnd'. di 9.3.2

Reproduksi

SETAN

Langkah-langkah untuk mereproduksi perilaku:

Pergi ke '...'
Klik '....'
Gulir ke bawah ke '....'
Lihat kesalahan

Perilaku yang diharapkan
Deskripsi yang jelas dan ringkas tentang apa yang Anda harapkan terjadi.

Tangkapan layar
Jika berlaku, tambahkan tangkapan layar untuk membantu menjelaskan masalah Anda.

Desktop (harap lengkapi informasi berikut):

OS: [misalnya iOS]
Peramban [ chrome versi terakhir]
Versi [misalnya 22]

Konteks tambahan
Tambahkan konteks lain tentang masalah di sini.

Sumber

shenghou

👍5

Komentar yang paling membantu

Inilah yang akhirnya saya lakukan

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

hisuwh pada 12 Agu 2019

👍18 👎5

Semua 8 komentar

Hai, DragDropContext telah dihapus sejak versi 9 https://github.com/react-dnd/react-dnd/pull/1439

adiosneo pada 25 Jul 2019

👍3

Hai, DragDropContext telah dihapus sejak versi 9 #1439

oh terima kasih

shenghou pada 26 Jul 2019

Apa jalur migrasi sekarang setelah ini telah dihapus?

hisuwh pada 5 Agu 2019

👍7

Guys, apakah ada panduan migrasi untuk perubahan yang melanggar di versi 9.x?

alencarlucas pada 9 Agu 2019

👍4

Guys, apakah ada panduan migrasi untuk perubahan yang melanggar di versi 9.x?

Tidak, Anda dapat mengingatkan penulis untuk memperbarui dokumen.

shenghou pada 12 Agu 2019

Inilah yang akhirnya saya lakukan

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

hisuwh pada 12 Agu 2019

👍18 👎5

Bagi mereka di luar sana googling, ini mungkin membantu:

INI TIDAK BEKERJA

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

Saya ulangi, ITU TIDAK BEKERJA

Alih-alih lakukan ini:

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>
)

sumber: kode Dnd