React-dnd: Impossible d'importer DragDropContext dans la v9.3.2

Créé le 24 juil. 2019  ·  8Commentaires  ·  Source: react-dnd/react-dnd

Décrivez le bogue
J'ai mis à niveau dnd de 7.4.5 à 9.3.2, mais le navigateur renvoie une erreur :

Tentative d'erreur d'importation : « DragDropContext » n'est pas exporté à partir de « react-dnd ». en 9.3.2

la reproduction

DÉMON

Étapes pour reproduire le comportement :

  1. Aller à '...'
  2. Cliquer sur '....'
  3. Faites défiler jusqu'à '....'
  4. Voir l'erreur

Comportement prévisible
Une description claire et concise de ce à quoi vous vous attendiez.

Captures d'écran
Le cas échéant, ajoutez des captures d'écran pour expliquer votre problème.
image

Bureau (veuillez compléter les informations suivantes) :

  • Système d'exploitation : [par exemple, iOS]
  • Navigateur [dernière version chrome]
  • Version [par exemple 22]

Contexte supplémentaire
Ajoutez ici tout autre contexte concernant le problème.

Commentaire le plus utile

C'est ce que j'ai fini par faire

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

Tous les 8 commentaires

Bonjour, DragDropContext été supprimé depuis la version 9 https://github.com/react-dnd/react-dnd/pull/1439

Bonjour, DragDropContext été supprimé depuis la version 9 #1439

oh merci

Quel est le chemin de migration maintenant que cela a été supprimé ?

Les gars, existe-t-il un guide de migration pour les changements de rupture dans la version 9.x ?

Les gars, existe-t-il un guide de migration pour les changements de rupture dans la version 9.x ?

Non, vous pouvez rappeler à l'auteur de mettre à jour le document.

C'est ce que j'ai fini par faire

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

Pour ceux qui recherchent sur Google, cela pourrait aider :

CELA NE FONCTIONNE PAS

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

Je répète, ÇA NE FONCTIONNE PAS

Faites plutôt ceci :

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

sources : code MDN

comment résoudre

Cette page vous a été utile?
0 / 5 - 0 notes