React-dnd: لا يمكن استيراد DragDropContext في v9.3.2

تم إنشاؤها على ٢٤ يوليو ٢٠١٩  ·  8تعليقات  ·  مصدر: react-dnd/react-dnd

صف الخلل
لقد قمت بترقية dnd من 7.4.5 إلى 9.3.2 ، لكن المتصفح ألقى خطأ:

تمت محاولة خطأ استيراد: لم يتم تصدير "DragDropContext" من "رد فعل- dnd". في 9.3.2

التكاثر

شيطان

خطوات إعادة إنتاج السلوك:

  1. اذهب إلى '...'
  2. انقر فوق "...."
  3. مرر لأسفل إلى "...."
  4. انظر الخطأ

سلوك متوقع
وصف واضح ومختصر لما توقعت حدوثه.

لقطات
إذا أمكن ، أضف لقطات شاشة للمساعدة في شرح مشكلتك.
image

سطح المكتب (يرجى استكمال المعلومات التالية):

  • نظام التشغيل: [مثل iOS]
  • المتصفح [chrome last version]
  • الإصدار [على سبيل المثال 22]

سياق إضافي
أضف أي سياق آخر حول المشكلة هنا.

التعليق الأكثر فائدة

هذا ما انتهى بي الأمر بفعله

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

ال 8 كومينتر

مرحبًا ، تمت إزالة DragDropContext منذ الإصدار 9 https://github.com/react-dnd/react-dnd/pull/1439

مرحبًا ، تمت إزالة DragDropContext منذ الإصدار 9 # 1439

أوه شكرا

ما هو مسار الهجرة الآن بعد أن تمت إزالته؟

يا رفاق ، هل هناك أي دليل ترحيل للتغييرات العاجلة في إصدار 9.x؟

يا رفاق ، هل هناك أي دليل ترحيل للتغييرات العاجلة في إصدار 9.x؟

لا ، يمكنك تذكير المؤلف بتحديث المستند.

هذا ما انتهى بي الأمر بفعله

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

بالنسبة لأولئك الذين يستخدمون googling ، قد يساعد ذلك:

هذا لا يعمل

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

أكرر ، هذا لا يعمل

بدلاً من ذلك ، افعل هذا:

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

المصادر: كود Dnd

كيفية حل

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات