React-dnd: Não é possível importar DragDropContext na v9.3.2

Criado em 24 jul. 2019 · 8Comentários · Fonte: react-dnd/react-dnd

Descreva o bug
Eu atualizei dnd de 7.4.5 para 9.3.2, mas o navegador apresenta um erro:

Tentativa de erro de importação: 'DragDropContext' não é exportado de 'react-dnd'. em 9.3.2

Reprodução

DEMÔNIO

Passos para reproduzir o comportamento:

Vamos para '...'
Clique em '....'
Role para baixo até '....'
Ver erro

Comportamento esperado
Uma descrição clara e concisa do que você esperava que acontecesse.

Capturas de tela
Se aplicável, adicione capturas de tela para ajudar a explicar seu problema.

Desktop (preencha as seguintes informações):

SO: [por exemplo, iOS]
Navegador [última versão do Chrome]
Versão [por exemplo, 22]

Contexto adicional
Adicione qualquer outro contexto sobre o problema aqui.

Fonte

shenghou

👍5

Comentários muito úteis

Isso é o que eu acabei fazendo

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

👍18 👎5

Todos 8 comentários

Olá, DragDropContext foi removido desde a versão 9 https://github.com/react-dnd/react-dnd/pull/1439

adiosneo em 25 jul. 2019

👍3

Olá, DragDropContext foi removido desde a versão 9 # 1439

oh obrigado

shenghou em 26 jul. 2019

Qual é o caminho de migração agora que foi removido?

hisuwh em 5 ago. 2019

👍7

Pessoal, existe algum guia de migração para as mudanças mais urgentes na versão 9.x?

alencarlucas em 9 ago. 2019

👍4

Pessoal, existe algum guia de migração para as mudanças mais urgentes na versão 9.x?

Não, você pode lembrar o autor de atualizar o documento.

shenghou em 12 ago. 2019

Isso é o que eu acabei fazendo

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

👍18 👎5

Para quem está pesquisando no Google, isso pode ajudar:

ISSO NÃO 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, ISSO NÃO FUNCIONA

Em vez disso, faça o seguinte:

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

fontes: código Dnd