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
Étapes pour reproduire le comportement :
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.
Bureau (veuillez compléter les informations suivantes) :
Contexte supplémentaire
Ajoutez ici tout autre contexte concernant le problème.
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
Commentaire le plus utile
C'est ce que j'ai fini par faire