React-dnd: كيفية استخدام مكون طرف ثالث كمصدر سحب؟

سؤال جيد. أعتقد أنه يجب أن تكون قادرًا على القيام بذلك:

import { findDOMNode } from 'react-dom';

class DraggableListGroupItem extends Component {
  render() {
    const { connectDragSource, ...rest } = this.props;
    return (
      <ListGroupItem
        {...rest}
        ref={instance => connectDragSource(findDOMNode(instance))}
      />
    );
  }
}

export default DragSource(...)(DraggableListGroupItem);

يعمل هذا لأن وظائف connect*() تنظر إلى ما تمرره لهم. يمكن استخدامها إما بشكل إعلاني (تمرير عنصر DOM React والحصول على عنصر DOM React في المقابل) أو بشكل إلزامي (استدعها باستخدام عقدة DOM ولا تنس الاتصال بها مع null لاحقًا - تمامًا مثل عمل refs ).

(يمنحك هذا أيضًا حرية استخدام بعض عناصر DOM الأخرى كمصدر سحب - على سبيل المثال ، يمكنك الاستعلام عن العقدة التي تحصل عليها من findDOMNode() . يجب استخدام هذا كملاذ أخير لأنه من السيئ الاعتماد على داخلي بنية DOM لمكون تابع لجهة خارجية.)

هذا لم يعمل بالنسبة لي. أصبح التداخل صحيحًا الآن ولكن العنصر غير قابل للسحب وأحصل على الخطأ التالي في وحدة التحكم:

Unhandled promise rejection TypeError: (0 , _reactDom2.default) is not a function(…)

أعتقد أنك كتبت

import findDOMNode from 'react-dom';

بدلا من

import { findDOMNode } from 'react-dom';

في الواقع ، لا يحتوي react-dom على تصدير افتراضي ، ولهذا السبب استخدمت تصديرًا محددًا باسم findDOMNode . المزيد عن الفرق بين الصادرات الافتراضية والمسمية: http://exploringjs.com/es6/ch_modules.html

كنت في منتصف محاولة كتابة مثال مختصر لكنك اكتشفت الخطأ أولاً!

أعرف الفرق بين عمليات التصدير الافتراضية والمسمَّاة ، لكنني لا ألاحظ دائمًا أيهما أحتاج إليه ، كما أن أدوات تصحيح الأخطاء ليست رائعة في تقديم رسالة خطأ توضح ما يحدث. أستطيع الآن أن أرى كيف تشير رسالة الخطأ هذه إلى المشكلة على الرغم من أنها تعرضت للتشويه بواسطة Webpack. شكرا على الدرس!

ملاحظة: إذا كنت سأقدم طلب سحب لإضافة هذا إلى المستندات (لست متأكدًا من أنه سيكون لدي وقت) ، فأين سأضعه؟ قد يساعد إذا أشار خطأ connectDragSource إلى هذا الحل.

لست متأكدًا ، أعتقد أن الرسالة الحالية جيدة بما يكفي. الآن لدينا هذه المشكلة لـ googling أيضًا :-)

بالمناسبة ، أعدت قراءة سؤالك وأريد أن أوضح أنك لست مضطرًا مطلقًا إلى لفه بـ <div> وجه التحديد . الهدف من رسالة الخطأ هو أن connectDragSource() يحتاج إلى التفاف أي عنصر DOM - <div> ، <li> ، أو أي شيء آخر. ما عليك سوى الحل البديل أعلاه للمكونات المخصصة.

الآن لدينا هذه المشكلة لـ googling أيضًا :-)

لحسن الحظ! :ابتسامة:

فقط تريد إضافة القليل من الدقة ، إذا كنت معتادًا على سلسلة مكالمات connect*() في render() s ، فلن يعمل نفس الشيء مع النهج أعلاه ، بدلاً من ذلك تحتاج إلى القيام بـ التالية:

ref={instance => {
  const node = findDOMNode(instance);
  connectDragSource(node);
  connectDropTarget(node);
}}

سؤالان حول هذا:
س 1. هل يمكنك أيضًا استخدام مكتبة الجزء الثالث كهدف سحب. قد تكون حالة الاستخدام هي استخدام "الحاوية" المتفاعلة كهدف وإسقاط "الصف" أو أي مكونات أخرى بداخلها لإنشاء صفحة
س 2. يبدو أن findDOMNode لا يعمل على المكونات الوظيفية. كيف يتم السحب / الإفلات مع بعض مكونات الطرف الثالث إذا كانت تعمل؟