React-dnd: لا يتم عرض مصدر السحب على الإطلاق

يحدث لي نفس الشيء ، على الرغم من أنني أستخدم بناء جملة ES6:

import React, { Component } from "react";
import { DragSource } from "react-dnd";
import PropTypes from "prop-types";

import "./Dictionary.css";

const propTypes = {
  entry: PropTypes.object.isRequired,

  // Injected by React DnD:
  isDragging: PropTypes.bool.isRequired,
  connectDragSource: PropTypes.func.isRequired
};

const TYPES = {
  ROW: "row"
};

/**
 * Implements the drag source contract.
 */
const rowSource = {
  beginDrag(props) {
    console.log(props);
    return {
      entry: props.entry
    };
  }
};

/**
 * Specifies the props to inject into your component.
 */
function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}

class Row extends Component {
  constructor(props) {
    console.log("here");
    super(props);
    this.state = {
      entry: props.entry
    };
  }

  static getDerivedStateFromProps = (props, state) => {
    return {
      entry: props.entry
    };
  };

  render() {
    const { isDragging, connectDragSource } = this.props;
    const { entry } = this.state;

    console.log("dragging:", isDragging);
    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }} className="row">
        <div>{entry.string}</div>
        <div>{entry.kMandarin}</div>
        <div>{entry.kDefinition}</div>
      </div>
    );
  }
}

Row.propTypes = propTypes;

export default DragSource(TYPES.ROW, rowSource, collect)(Row);

استخدام:

    "react-dnd-html5-backend": "^5.0.1",
    "react-dom": "^16.5.1",

المتوقع: راجع المكونات المقدمة وسجلات وحدة التحكم
فعلي: لم يتم تقديم أي شيء ؛ لم يتم تسجيل أي شيء

أدت إضافة مكون الموفر في جذر تطبيقي إلى حل المشكلة.

أعتقد أنه مع ذلك - يجب أن يُذكر بوضوح في مثال الكود المطلوب - اعتقدت أن رؤية مثال كافٍ لفهم كيفية البدء في استخدام المكتبة

أعتقد أن المشكلة تكمن في عبارة if هذه:
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

يبدو أنه يعطل فحصًا قد يؤدي إلى حدوث خطأ إذا لم يكن هناك سياق.

اضطررت إلى إضافة الموفر كما هو موضح أدناه:

import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContextProvider } from "react-dnd";

<DragDropContextProvider backend={HTML5Backend}>
 <App/>
</DragDropContextProvider>

لمعلوماتك: لقد واجهت للتو المشكلة عند استخدام المداخل وقمت بإصلاحها عن طريق استبدال واجهة برمجة التطبيقات ReactDOM.unstable_renderSubtreeIntoContainer القديمة بـ ReactDOM.createPortal .

لماذا لم أقضي الكثير من الوقت لاستكشاف سبب العرض ، وجدت الإجابة هنا ، يرجى إجراء بعض العينات على محمل الجد ، شكرًا لك

يبدو أنه موجود ضد React 16.8.1 ، لم يتم إنشاء مديري مطلقًا والسياق. المستهلك داخل DragSource لا يصنع أي أطفال أبدًا.

هذا ليس في أي مكان في قسم البدء السريع بالمستندات.

هذا عمليًا هو أول شيء يجب أن يكون في المستندات ...

نفس المشكلة هنا ولكن فقط في ظل عمليات إنتاج معينة (لقد تأكدت من وجود DragDropContextProvider في شجرتى). لقد لاحظت أنه عند استخدام أدوات مطور التفاعل ، يتم فقد DragDropContextProvider ويظهر كـ Unknown في شجرة المكون (انظر لقطة الشاشة)

الرجوع إلى إصدار أقدم من الإصدار 7.3.2 إلى الإصدار

• "رد فعل- dnd": "7.1.0"،
• "رد فعل- dnd-html5-backend": "7.1.0"

يصلحها لي.

كما أنني واجهت نفس الخطأ.
معروض في التطوير ولكن ليس في الإنتاج.

إنها بيئتي.

• "رد فعل dnd" ： "7.1.0" 、
• "رد فعل- dnd-html5-backend" ： "7.1.0"

const render = () => {
  ReactDOM.render(
    <DragDropContextProvider backend={HTML5Backend}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppContainer>
            <App />
          </AppContainer>
        </ConnectedRouter>
      </Provider>
    </DragDropContextProvider>,
    document.getElementById('app')
  );
};

DragDropContextProvider غير معروف

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

هل يعلم أي شخص ما إذا كان قد تم حل ذلك قبل أن يتم إغلاقه تلقائيًا؟

كيف حللت
في حالتي ، عملت جميعها بشكل جيد في التطوير ، لكنها تعطلت تمامًا في الإنتاج.

نشأت المشكلة عن طريق مسار الاستيراد useDrag ...

لا يعمل الاستيراد
import {useDrag} from "react-dnd/lib/index";

استيراد العامل
import {useDrag} from "react-dnd";

ومع ذلك ، فأنا لا أعرف حقًا كيف تم إنشاء أول عملية استيراد.

أيضًا ، يمكنني القول بأمان أنك لست بحاجة إلى استيراد DndProvider في جذر التطبيق . لقد فعلت ذلك من قبل لاكتشاف أن المشكلة قد نشأت عن الاستيراد ، ولكن بعد "الإصلاح" في الاستيراد ، استعدت DndProvider في أحد المكونات بدلاً من جذر التطبيق (للحصول على رمز أكثر وضوحًا) وهذا يعمل بخير.

سياق الكلام:

• "رد فعل": "^ 16.8.3"،
• "رد فعل- dnd": "^ 9.0.1"،
• "رد فعل- dnd-html5-backend": "^ 9.0.0"،

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

اي حل حتى الان؟ لا شيء تم اقتراحه في هذا الموضوع ساعد.

"رد فعل- dnd": "^ 11.1.3"،
"رد فعل- dnd-html5-backend": "^ 11.1.3"،

كل شيء يعمل بشكل جيد فقط عندما أقوم بتغيير موضع الحالة ، لا يمكنني رؤية العرض بينما يمكنني رؤية التغييرات في سجلات وحدة التحكم.