React-dnd: No se puede importar DragDropContext en v9.3.2

Creado en 24 jul. 2019 · 8Comentarios · Fuente: react-dnd/react-dnd

Describe el error
Actualicé dnd de 7.4.5 a 9.3.2, pero el navegador arroja un error:

Error de intento de importación: "DragDropContext" no se exporta desde "react-dnd". en 9.3.2

Reproducción

DEMONIO

Pasos para reproducir el comportamiento:

Ir a '...'
Haga clic en '....'
Desplácese hacia abajo hasta '....'
Ver error

Comportamiento esperado
Una descripción clara y concisa de lo que esperaba que sucediera.

Capturas de pantalla
Si corresponde, agregue capturas de pantalla para ayudar a explicar su problema.

Escritorio (complete la siguiente información):

SO: [p. Ej., IOS]
Navegador [última versión de Chrome]
Versión [por ejemplo, 22]

Contexto adicional
Agregue aquí cualquier otro contexto sobre el problema.

Fuente

shenghou

👍5

Comentario más útil

Esto es lo que terminé haciendo

- 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 en 12 ago. 2019

👍18 👎5

Todos 8 comentarios

Hola, DragDropContext se eliminó desde la versión 9 https://github.com/react-dnd/react-dnd/pull/1439

adiosneo en 25 jul. 2019

👍3

Hola, DragDropContext se eliminó desde la versión 9 # 1439

Oh, gracias

shenghou en 26 jul. 2019

¿Cuál es la ruta de migración ahora que se ha eliminado?

hisuwh en 5 ago. 2019

👍7

Chicos, ¿hay alguna guía de migración para los cambios importantes en la versión 9.x?

alencarlucas en 9 ago. 2019

👍4

Chicos, ¿hay alguna guía de migración para los cambios importantes en la versión 9.x?

No, puede recordarle al autor que actualice el documento.

shenghou en 12 ago. 2019

Esto es lo que terminé haciendo

- 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 en 12 ago. 2019

👍18 👎5

Para aquellos que buscan en Google, esto podría ayudar:

ESTO NO FUNCIONA

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

Repito, eso no funciona

En su lugar, haz esto:

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

fuentes: código Dnd