React-dnd: एक ही समय में दो HTML5 बैकएंड नहीं हो सकते

DragDropContext के स्रोत की जाँच करें। मुझे लगता है कि आपको मौजूदा प्रबंधक को फिर से उपयोग करने में सक्षम होना चाहिए अगर यह पेड़ के ऊपर एक घटक द्वारा निर्दिष्ट किया गया हो। लेकिन यह अभी भी एक मुश्किल सवाल है .. क्या आपके पास कोई प्रस्तावित समाधान है?

मुझे लगता है कि आपको मौजूदा प्रबंधक को फिर से उपयोग करने में सक्षम होना चाहिए अगर यह पेड़ के ऊपर एक घटक द्वारा निर्दिष्ट किया गया हो।

यहां तक ​​कि अगर यह संभव है, तो निर्यात किया जाने वाला घटक स्वतंत्र रूप से भी काम करने में सक्षम होना चाहिए, और उन मामलों में जहां बैकएंड मौजूद है (ऐप में जहां घटक का उपयोग किया जा रहा है) कहीं न कहीं श्रृंखला का पुन: उपयोग किया जाना चाहिए। मैं स्रोत को पढ़ने की कोशिश करूंगा और देखूंगा कि क्या इसे खींचा जा सकता है।

दुर्भाग्य से, एकमात्र समाधान जो मैं अभी सोच सकता हूं, वह अंतिम घटक को निर्यात करना है जैसा कि है, और उम्मीद है कि उपयोगकर्ता अपने चयन के बैकएंड के साथ DragDropContext जोड़ें। तुम क्या सोचते हो?

निर्यात किया जाने वाला घटक स्वतंत्र रूप से और साथ ही काम करने में सक्षम होना चाहिए, और उन मामलों में जहां बैकएंड मौजूद है (ऐप में जहां घटक का उपयोग किया जा रहा है) कहीं न कहीं श्रृंखला का पुन: उपयोग किया जाना चाहिए।

हां, यह DragDropContext पूरी तरह से उपयोग न करके और मैन्युअल रूप से dragDropManager संदर्भ में उपयोग करके संभव है। आपका घटक संदर्भ में दिख सकता है, और या तो मौजूदा dragDropManager संदर्भ के नीचे से गुजरता है, या अपना स्वयं का निर्माण करता है। हालांकि यह कुछ नाजुक लगता है।

दुर्भाग्य से, एकमात्र समाधान जो मैं अभी सोच सकता हूं, वह अंतिम घटक को निर्यात करना है जैसा कि यह है, और उपयोगकर्ता को अपने चयन के बैकएंड के साथ एक ड्रैगड्रॉपकोटेक्स्ट जोड़ने की उम्मीद है। तुम क्या सोचते हो?

मुझे लगता है कि यह सबसे लचीला समाधान है। आपको वहां भी माना जा सकता है और <MyComponentContext> निर्यात होता है जो DragDropContext(HTML5Backend) लागू होता है।

निर्यात <MyComponentContext> जो DragDropContext(HTML5Backend) लागू होता है

मुझे खेद है, मुझे यह समझ में नहीं आया। क्या आप इसे थोड़ा और स्पष्ट कर सकते हैं?

export default function MyTagControlContext(DecoratedClass) {
  return DragDropContext(HTML5Backend)(DecoratedClass);
}

और आप उपयोगकर्ताओं से कह सकते हैं कि या तो अपने शीर्ष-स्तरीय घटक को MyTagControlContext में लपेटें या DragDropContext सीधे उपयोग करें यदि वे _already_ का उपयोग करें और React DnD का उपयोग करें।

आह! इस बारे में कैसा है? क्या यह बहुत बदसूरत दिखता है?

// in main component file
module.exports = {
    WithContext: DragDropContext(HTML5Backend)(ReactTags),
    WithOutContext: ReactTags
};

उपयोग तब कुछ इस तरह हो सकता है

var ReactTags = require('react-tags').WithContext; // if your app doesn't use react-dnd
var ReactTags = require('react-tags').WithOutContext; // if your app already uses react-dnd.

मुझे नहीं लगता कि यह काम करेगा क्योंकि प्रत्येक <ReactTags> बैकएंड की अपनी प्रति प्राप्त करेगा और आपके द्वारा ऊपर चिपकाई गई अपरिवर्तनीय त्रुटि को जन्म देगा क्योंकि वे बैकएंड उसी वैश्विक विंडो घटनाओं को संभालते हैं।

मुझे लगता है कि काम करेगा आप मैन्युअल रूप से dragDropManager (जैसे DragDropContext आंतरिक रूप से करता है) बना सकते हैं और सभी ReactTag उदाहरणों के लिए इसका एक ही उदाहरण उपयोग कर सकते हैं - एक कमबैक के साथ प्रबंधक context में परिभाषित किया गया है।

मेरा मतलब है कि आपके पुस्तकालय से कुछ इस तरह का निर्यात करना:

let defaultManager;
function getDefaultManager() {
    if (!defaultManager) {
        defaultManager = new DragDropManager(HTML5Backend);
    }
    return defaultManager;
}

class ReactTagContext {
    static contextTypes = {
        dragDropManager: PropTypes.object.isRequired
    };

    static childContextTypes = {
        dragDropManager: PropTypes.object.isRequired
    };

    getChildContext() {
        return {
            dragDropManager: this.context.dragDropManager || getDefaultManager()
        };
    }

    render() {
        return <ReactTag {...props} />
    }
}

बहुत बहुत धन्यवाद, Dan! मैं इसे आज़माऊंगा और आपके पास वापस आऊंगा। कोड साझा करने के लिए धन्यवाद: मुस्कराहट:

कोई संभावना नहीं है .. यदि आप इसे इस तरह से करते हैं, तो सीधे ReactTags निर्यात करने के बजाय उस वर्ग को निर्यात करें। यह किसी भी रैपर या डेकोरेटर के बिना "जैसा है" प्रयोग करने योग्य होना चाहिए।

तो दान! इसके लिए, मैं ऊपर के कई निर्यात समाधान की कोशिश कर रहा था -

// in main component file
module.exports = {
    WithContext: DragDropContext(HTML5Backend)(ReactTags),
    WithOutContext: ReactTags
};

अपने अन्य ऐप में, मैंने संदर्भ के बिना घटक को आयात करने की कोशिश की और मेरी खुशी के लिए, यह ठीक काम कर रहा है!

क्या आपको लगता है कि यह एक घिनौना समाधान है और मुझे आपके द्वारा प्रस्तावित प्रस्ताव के साथ आगे बढ़ना चाहिए या मुझे यह करने देना चाहिए?

@ prakhar1989 क्या आपको यकीन है कि यह पेज पर कई <Tags /> साथ काम करता है?

तुम मुझे वहाँ एक दूसरे के लिए था! : Stuck_out_tongue:

शुक्र है कि यह काम करता है!

हम्म, तो शायद यह ठीक है; ;-) मुझे बताएं कि क्या आपके पास इस दृष्टिकोण के साथ कोई समस्या है!

करूँगा! आपकी सारी मदद के लिए फिर से एक टन धन्यवाद।

पुनश्च: क्या आपके पास WithContext और WithoutContext लिए बेहतर नामकरण विचार हैं?

@ prakhar1989 मैं शायद WithContext संस्करण सीधे निर्यात करूँगा, और इस पर स्थिर क्षेत्र के रूप में NoContext डालूँगा ।

मैं इसी तरह के मुद्दे पर चल रहा हूं और मैं बेहतर तरीके से समझना चाहता हूं कि यह सीमा पहले स्थान पर क्यों है क्योंकि यह फिर से लिखने योग्य घटकों को काफी मुश्किल बना रहा है। जैसा कि यह है, प्रत्येक घटक जो प्रतिक्रिया-dnd का उपयोग करता है, उसे विभिन्न संदर्भों के बारे में पता होना चाहिए जो अनुप्रयोग में मौजूद हो सकते हैं और तदनुसार उनके साथ व्यवहार कर सकते हैं। यह बेहतर होगा यदि प्रत्येक घटक अपने स्वयं के ड्रैग व्यवहार / संदर्भ को प्रबंधित कर सकता है, भले ही बाकी एप्लिकेशन में क्या हो रहा हो।

उदाहरण के लिए, मैं एक अनुप्रयोग स्क्रीन जो कई फ़ाइल अपलोड घटक, एक छांटना मेनू और ड्रैग करने योग्य तत्वों के साथ एक खेल है चाहते हो सकता है। उन घटकों में से प्रत्येक में ड्रैग घटनाओं से निपटने के बहुत अलग तरीके हैं, और वास्तव में अपने स्वयं के संदर्भ के प्रभारी होने चाहिए।

मेरा पहला सवाल, यह HTML5Backend कोड के अंदर ही क्यों नहीं है?

setup() {
    ...

    // Events already setup - do nothing
    if (this.constuctor.isSetUp) return;

    // Don't throw an error, just return above.
    //invariant(!this.constructor.isSetUp, 'Cannot have two HTML5 backends at the same time.');

    this.constructor.isSetUp = true;
    ...
  }

बस HTML5Backend कोड के अंदर ऐसा क्यों नहीं करते

यह एक बड़ा मुद्दा है। यदि घटक कई बैकएंड का पता लगाने में सक्षम है, तो क्या यह सीधे मौजूदा बैकेंड के दायरे में गिरने का तर्क नहीं दे सकता है?

Hi @gaearon - मैं इस मुद्दे के साथ-साथ अपने मामले में भी भाग रहा हूं, मेरे पास एक पृष्ठ है जिसमें मैंने एक साथ (कोणीय) प्रदर्शन के कारण कोणीय टेम्पलेट के भीतर प्रतिक्रियाशील घटकों को एक साथ अलग कर दिया है। मेरे पास एक पृष्ठ है जो एक पुनरावर्ती वृक्ष संरचना में प्रश्न, विकल्प और अधिक बनाता है। मेरे पास एक टूलबार और एक प्रश्न पुस्तकालय है जो प्रश्न वृक्ष की चीजों को जोड़ने के लिए DnD का उपयोग करता है। मेरी समस्या यह है कि मैंने अब कई प्रतिक्रिया घटकों को सेटअप किया है जो एक कोणीय संदर्भ में रहते हैं। इस वजह से, मैं उनमें से प्रत्येक को DragDropContext साथ लपेट रहा हूं जो इस त्रुटि का कारण बनता है। मैंने उपरोक्त धागे का अनुसरण करने की कोशिश की, लेकिन यह मेरे लिए पूरी तरह से स्पष्ट नहीं है कि मैं इन अलग-अलग प्रतिक्रिया घटकों के लिए एक संदर्भ साझा करने के लिए अपने पेज पर सब कुछ परिवर्तित किए बिना क्या प्रतिक्रिया (आदर्श नहीं) कर सकता हूं। मैं ES6 सिंटैक्स से थोड़ा परिचित हूं लेकिन मैं एक ऐसी परियोजना पर काम कर रहा हूं जो अभी भी ES5 का उपयोग कर रही है। क्या ऊपर से साझा DragDropManager अवधारणा को लागू करने का एक तरीका है? मैंने इसे अब तक आज़माया है और मुझे DragDropManager पहुँच नहीं लगती है क्योंकि यह dnd-core

आपकी मदद के लिए और इस भयानक पुस्तकालय के लिए धन्यवाद!

पुनश्च अगर यह मायने रखता है, मैं ngReact का उपयोग कर रहा हूँ।

@ prakhar1989 @globexdesigns @gaearon

मैं एक ही बात सोच रहा हूँ कि HTML5 बैकएंड सिर्फ बैकएंड का उपयोग क्यों नहीं कर सकता है यदि एकाधिक का उपयोग किया जाता है? मेरी पिछली टिप्पणी के अनुसार, यह वास्तव में मेरे लिए प्रतिक्रिया-योग्‍य बना रहा है क्योंकि मेरे पास एक कोणीय पृष्ठ के भीतर कई प्रतिक्रिया वाले क्षेत्र हैं जो एक दूसरे के बीच DnD करने में सक्षम हैं और इसके साथ एक दीवार को मार रहे हैं।

किसी को भी इस के लिए कोई जल्दी तय है? मैं अपने विकास में एक मृत पड़ाव पर हूं।

@abobwhite यह है कि मैंने _solved_ it किया है। यह निश्चित रूप से एक महान समाधान नहीं है, लेकिन यह अब के रूप में काम करने लगता है।

उम्मीद है की यह मदद करेगा,

धन्यवाद, @ prakhar1989 ! लेकिन मैं इस बात का पालन नहीं कर रहा हूं कि संदर्भ के साथ लिपटे हुए एक के साथ एक से अधिक निर्यात और समस्या हल कैसे नहीं होती है। मेरी समस्या संभावित रूप से प्रतिक्रिया-dnd के साथ किसी अन्य अनुप्रयोग में एम्बेड नहीं की जा रही है, बल्कि प्रतिक्रिया में मेरे पूरे dnd- सक्षम क्षेत्र (कई प्रतिक्रिया और कोणीय घटकों / निर्देशों के साथ) को लपेटने में सक्षम नहीं हो रही है, इसलिए मैं सिर्फ उन चारों ओर संदर्भ लपेटने की कोशिश कर रहा था मेरे पृष्ठ के उन घटकों पर प्रतिक्रिया दें जो डीएनडी का समर्थन करते हैं ... मुझे ऊपर से DragDropManager का उपयोग नहीं है ताकि नया हो सके ...

मैं एक ही मुद्दा रहा हूँ। मैं @abobwhite से दृढ़ता से सहमत

इस धागे ने मुझे डॉक्स की तरह अपने घटक पदानुक्रम में HTML5Backend और DragDropContext मूव करके मेरी अपरिवर्तनीय समस्या को हल करने के लिए प्रेरित किया।

यह एक अजीब समस्या है। मैं एक नेस्टेड reorderable घटक पर काम कर रहा हूं और मेरे पास मूल माता-पिता के अंदर DragDropContext नेस्टेड है। यह स्टैंडअलोन काम करने लगता है (लेकिन इसमें अभी भी ड्रैगड्रॉपकोटेक्स्ट नेस्टेड है)।

लेकिन जब मैं किसी अन्य प्रोजेक्ट के अंदर उस घटक का उपयोग करता हूं, जिसमें पदानुक्रम के ऊपर DragDropContext आरंभीकृत होता है, तो मुझे यह त्रुटि मिलती है।

मैं इस मुद्दे पर एक आवेदन के साथ भाग गया जिसमें मैं काम कर रहा हूं। मेरे पास सभी घटकों पर पूरा नियंत्रण था इसलिए मैंने @DragDropContext(HTMLBackend) का उपयोग करने के बजाय समाप्त किया, मैंने इस टिप्पणी में decorator बनाने के लिए इस टिप्पणी में @gaearon कोड के बहुत करीब का उपयोग करके समाप्त किया जो कि एक साझा ड्रैग देगा ड्रॉप संदर्भ। यह वास्तव में अच्छी तरह से काम करता है।

मेरे पास बस यही बात थी और समस्या यह थी कि मेरे पास कॉम्पोनेंट था जिसमें @DragDropContext(HTMLBackend) इस्तेमाल होता था और फिर ComponentB में @DragDropContext(HTMLBackend) भी होता था।

ComponentB को ComponentA में आयात किया गया था जो मेरे लिए त्रुटि का कारण बना। मुझे बस इतना करना था कि ComponentB से DragDropContext को हटा दिया जाए और यह काम कर जाए।

क्या होगा अगर ऐप में 2 DrapDropContext लेकिन वे माता-पिता और बच्चे नहीं हैं?

मेरा मामला:

1. पहले dnd Context को Intialize करें
2. एक दूसरे डंडे के संदर्भ के रूप में शुरू करने का प्रयास करें। 💣

मैं चाइल्डकनेक्ट पर जांच नहीं कर सकता क्योंकि दूसरा घटक पहले dnd घटक / संदर्भ का बच्चा नहीं है

अपनी समस्या को हल करने के लिए मैंने इस कोड के साथ एक सिंगलटन किया:

import { DragDropManager } from 'dnd-core';
import HTML5Backend from 'react-dnd-html5-backend';

let defaultManager;

/**
 * This is singleton used to initialize only once dnd in our app.
 * If you initialized dnd and then try to initialize another dnd
 * context the app will break.
 * Here is more info: https://github.com/gaearon/react-dnd/issues/186
 *
 * The solution is to call Dnd context from this singleton this way
 * all dnd contexts in the app are the same.
 */
export default function getDndContext() {
  if (defaultManager) return defaultManager;

  defaultManager = new DragDropManager(HTML5Backend);

  return defaultManager;
}

और फिर उन सभी घटकों में जिनके पास एक बच्चा है, जिनके पास DragDropContext(HTML5Backend) मैं इसे उन बच्चों से हटा देता हूं और उनके माता-पिता में मैं ऐसा नहीं करता हूं:

import getDndContext from 'lib/dnd-global-context';

const ParentComponent = React.createClass({

  childContextTypes: {
    dragDropManager: React.PropTypes.object.isRequired,
  },

  getChildContext() {
    return {
      dragDropManager: getDndContext(),
    };
  },

  render() {
    return (<ChildComponentWithDndContext />);
  },

मुझे लगता है कि कुंजी यह है कि मैं केवल एक बार dnd संदर्भ को प्रारंभ करता हूं। तुम क्या सोचते हो?

@andresgutgon धन्यवाद। यह मेरे लिए भी काम करता है

@andresgutgon आप समाधान महान है, लेकिन यह अजीब है कि DrapDropContext DragDropManager componentWillUnmount पर नष्ट नहीं करता है, अर्थात यदि आप 2 DrapDropContext s का उपयोग नहीं करते हैं एक ही समय में, बल्कि 2 अलग-अलग पृष्ठों पर - आप अभी भी उनका उपयोग नहीं कर सकते। मैं अपने मामले में आपके हैक की कोशिश करने जा रहा हूं, लेकिन इस तरह की तुच्छ स्थिति के लिए अभी भी 100% अजीब है।

इसके अलावा किसी भी विचार क्यों 2 होने DragDropManager है कुछ बुरा / में गलत react-dnd ?

एक और दृष्टिकोण जो थोड़ा क्लीनर है एक मॉड्यूल बनाने के लिए है जो एक विशेष बैकएंड के लिए डेकोरेटर बनाता है, और फिर उस सजावट का उपयोग करें जहां आवश्यक हो:

lib / withDragDropContext.js

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

export default DragDropContext(HTML5Backend);

घटकों / MyComponent.js

import { Component } from 'react';
import withDragDropContext from '../lib/withDnDContext';

class MyComponent extends Component {

  render() {
    return (
     <div>
       // other children
     </div>
   );
}

export default withDragDropContext(MyComponent);

नमस्कार, क्या कोई जानता है कि जब आप एक घटक को ड्रैगड्रॉपकोटेक्स्ट में लपेटते हैं तो कैसे हल करते हैं और फिर एक अन्य घटक जो ड्रैगड्रॉपकोटेक्स्ट का उपयोग करता है, लेकिन यह घटक (बड़े कैलेंडर पर प्रतिक्रिया करता है) एक एनपीएम पैकेज है, इसलिए इसे वहां से हटा दें और कोई समाधान नहीं है एक दूसरे को, नहीं अभिभावक-बच्चे के बगल में हैं ... आप एक बार देख यहाँ हो सकता है https://github.com/martinnov92/TSCalendar (यह कार्य प्रगति पर है - तो यह छोटा सा गन्दा है: डी) धन्यवाद

मेरा मानना ​​है कि मैंने प्रतिक्रिया-मोज़ेक टाइलिंग विंडो मैनेजर का उपयोग वही मुद्दा है जो प्रतिक्रिया-डीएनडी और मेरे अपने घटकों का उपयोग कर रहा है, जो कि प्रतिक्रिया-डीएनडी का भी उपयोग कर रहे हैं।

तो मैं यह अनुमान लगा रहा हूं कि सीधे रिएक्शन-डैंड में हल नहीं किया गया है, लेकिन कुछ वर्कअराउंड हैं जिन्हें हम लागू कर सकते हैं।

क्या पूर्ण कार्य कोड का एक उदाहरण है जो इस समस्या को हल करता है?

@gcorne का समाधान काम करता है

नमस्ते, मैं एक ही समस्या है, लेकिन हम प्रतिक्रिया-डेटा-ग्रिड का उपयोग करते हैं और प्रतिक्रिया-बड़ा-कैलेंडर जोड़ने का प्रयास करते हैं
घटक को जोड़ने के बाद जिसमें प्रतिक्रिया-बड़ा-कैलेंडर शामिल है, हमारे पास त्रुटि है "अनकवर्ड एरर: एक ही समय में दो एचटीएमएल 5 बैकेंड नहीं हो सकते।"

प्रतिक्रिया-बड़ा-कैलेंडर उपयोग प्रतिक्रिया-बिंदु और प्रतिक्रिया-dnd-html5-backend उस समस्या को कैसे हल करें?

हाय @szopenkrk क्या आपने यह https://github.com/react-dnd/react-dnd/issues/186#issuecomment -232382782 की कोशिश की?
लेकिन मुझे लगता है कि आपको Dnd बैकएंड को स्वीकार करने के लिए प्रतिक्रिया-बड़े-कैलेंडर के लिए एक पुल अनुरोध करने की आवश्यकता होगी

शायद थोड़ा बहुत देर हो गई है लेकिन मैं एक समान लेकिन थोड़ा अलग समाधान के साथ आया हूं। मैंने एक उच्चतर ऑर्डर कंपोनेंट लागू किया और बस इसे मेरे सभी ड्रैगड्रॉपकोटेक्स्ट अवगत घटकों में उपयोग किया।

कोड इस तरह दिखता है (टाइपस्क्रिप्ट):

import * as React from 'react';
import {DragDropContext} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

// context singleton
let context: Function;

export function withDragDropContext<P>(
    Component: React.ComponentClass<P> | React.StatelessComponent<P>,
): React.ComponentClass<P> {
    // ensure a singleton instance of the context exists
    if (!context) {
        context = DragDropContext<P>(HTML5Backend);
    }

    return context(Component);
}

और फिर इसे अपने घटकों में निम्नानुसार उपयोग करें:

import * as React from 'react';
import {withDragDropContext} from 'components/WithDragDropContext';

class MyClass extends React.Component<IMyClassProps, {}> {
    // ...
}

export default withDragDropContext<IMyClassProps>(MyClass);

नायब
मैंने अभी तक कोशिश नहीं की है, लेकिन आपको घोषणा के दौरान संदर्भ चर को आबाद करने में सक्षम होना चाहिए:

const context = DragDropContext(HTML5Backend);

और फिर if (!context) {... भाग को छोड़ दें।

@codeaid धन्यवाद!

मैं @andresgutgon जैसी ही स्थिति से

यहाँ कोई भी समाधान @ guang2013 क्यों नहीं किया?

नहीं, अभी भी कोई समाधान नहीं है, मुझे नहीं पता, मैंने कार्ड को बड़े कैलेन्डर में खींचने की कोशिश की, और मैंने कार्ड को ड्रैगसोर्स और कार्डलिस्ट के रूप में ड्रैगएन्डड्रॉप कॉन्टेक्स्ट के रूप में बनाया, कैलेंडर को एक अन्य ड्रैगएंडड्रैक कॉन्टेक्स्ट के रूप में, फिर दो html5backend त्रुटियों को बाहर फेंक दिया, मैंने कोशिश की यहाँ प्रदान की गई किसी भी विधि का उपयोग करने के लिए, लेकिन कोई भी मेरी समस्या को हल नहीं कर सकता है। @andresgutgon , जब आप ऑनलाइन होते हैं, तो क्या मैं आपसे इस पर सीधे बात कर सकता हूं? बहुत सराहना की।

@ guang2013 यदि आप एक पुस्तकालय का उपयोग कर रहे हैं जो कि प्रतिक्रिया-

@gcorne के समाधान ने मेरे लिए प्रतिक्रिया-हॉट-लोडर के साथ ऐप में प्रतिक्रिया-dnd का उपयोग करने की अनुमति दी। फिर भी, मैं थोड़ा हैरान हूँ कि यह बॉक्स से बाहर काम नहीं करता है!

पुराना मुद्दा, लेकिन यदि कोई व्यक्ति Google से यहां समाप्त होता है:

मेरे पेज पर केवल 1 DND प्रदाता था, मैं किसी भी अन्य लाइब्रेरी को एकीकृत नहीं कर रहा था जिसमें DND हो, लेकिन मैंने अभी भी इस त्रुटि को समाप्त कर दिया, कुछ हद तक बेतरतीब ढंग से।

मेरी समस्या यह थी कि DragDropContextProvider ReactRouter के BrowserRouter तत्व के अंदर था, जिसने HTML5Backend को हर नेविगेशन पर फिर से बनाया जाना था, और यदि दोनों पुराने पृष्ठ (जो दूर से नेविगेट किए गए थे) और नए (एक के लिए नेविगेट) में DND तत्व थे। उपरोक्त त्रुटि होगी।

इसका समाधान था BrowserRouter से DragDropContextProvider को स्थानांतरित करना।

यह उन लोगों के लिए है, जिन्होंने पहली बार ReactDnD की कोशिश की, ट्यूटोरियल का अनुसरण किया और 64 वर्ग की अलमारी के साथ समाप्त हुआ।
मैं अपनी नाइटी को इधर-उधर खींच सकता था।
समस्या तब थी जब मैंने BoardSquare में से एक में इसे छोड़ने की कोशिश की, यह 2 एचटीएमएल 5 बैकएंड मुद्दे के साथ फेंक दिया।

जोड़

जैसा कि दूसरों ने पहले टिप्पणियों में उल्लेख किया है, ऐप रेंडरर चक्र के बाहर DragDropContextProvider प्रदान करें।
के रूप में, सीधे नहीं करते एक ReactDOM.render करने के लिए एक कॉलबैक के रूप में observe कार्य करते हैं।
इसके बजाय यह करें:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import './index.css';
import App from './App';

ReactDOM.render(
    <DragDropContextProvider backend={HTML5Backend}>
        <App />
    </DragDropContextProvider>,
    document.getElementById('root')
)

App.js

import React, { Component } from 'react';
import Board from './Board';
import { observe } from './Game';

class App extends Component {
    state = {
        knightPosition: [0, 0]
    }

    componentDidMount = () => {
        observe(knightPosition => {
            this.setState(prevState => ({
                ...prevState,
                knightPosition
            }));
        });
    }

    render() {
        return (
            <div className="App">
                <Board knightPosition={this.state.knightPosition} />
            </div>
        );
    }
}

export default App;

मुझे लगता है कि यह इस मुद्दे से संबंधित है
https://github.com/prakhar1989/react-tags/issues/497

@gaearon मुझे पता है कि यह पुराना है, लेकिन मैं वास्तव में आपके उदाहरण में DragDropManager की पकड़ कैसे प्राप्त करूं? यह कहीं भी निर्यात नहीं किया जाता है।

defaultManager = new DragDropManager(HTML5Backend);

मेरी समस्या यह है कि मैं किसी पेज पर कुछ 3 पार्टी एपीआई के माध्यम से कुछ विजेट्स दे रहा हूं, और मैं अपने वास्तविक विजेट की तुलना में DragDropContextProvider अधिक नहीं ले जा सकता।

पुराने निर्माण को हटाकर इस समस्या को हल किया।
बस डिस्टर्ब फोल्डर को डिलीट करें या index.html को एडिट करें। मैं सटीक समस्या नहीं जानता, लेकिन यह मेरे लिए काम करता है

सौभाग्य से, मुझे @gcorne (https://github.com/react-dnd/react-dnd/issues/186#issuecomment-282789420) का (छिपा हुआ) उत्तर मिल सकता है। इसने मेरी समस्या को हल कर दिया - जिसे मुश्किल माना गया - तुरंत।
@ prakhar1989 मुझे लग रहा है कि यह एक असली पार्टी का जवाब है और इसे किसी तरह उजागर किया जाना चाहिए, इसलिए हो सकता है कि इसे बग विवरण में लिंक किया जाए?

समाधान जो मुझे लगा कि मेरे लिए काम करता है और मुझे HTML5 या टच बैकएंड का उपयोग करने की अनुमति देता है:

एक सिंगलटन HOC घटक बनाएँ:

import {DragDropContext} from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import TouchBackend from "react-dnd-touch-backend";

const DragAndDropHOC = props => {
    return <React.Fragment>
        {props.children}
    </React.Fragment>
};

export default {
    HTML5: DragDropContext(HTML5Backend)(DragAndDropHOC),
    Touch: DragDropContext(TouchBackend)(DragAndDropHOC),
}

फिर एक प्रदाता घटक:

const DragDrop = props => {
    if (props.isTouch) {
        return <DragDropContext.Touch>{props.children}</DragDropContext.Touch>
    } else {
        return <DragDropContext.HTML5>{props.children}</DragDropContext.HTML5>
    }
};

और जहाँ भी मुझे इसकी आवश्यकता हो, <DragDrop isTouch={props.isTouch} /> उपयोग करें।

उसी मुद्दे पर आने वाले डेवलपर्स के लिए, आप इस HOC समाधान पर एक नज़र डाल सकते

मैं अब जेस्ट परीक्षणों के साथ इस समस्या में भाग रहा हूं। HTML5-Backend को जेस्ट परीक्षणों में एक सिंगलटन की तरह माना जाता है (यही वजह है कि समस्या हो रही है ... मुझे लगता है)

SO में विस्तृत समस्या:

https://stackoverflow.com/questions/58077693/multiple-react-dnd-jest-tests-cannot-have-two-html5-backends-at-the-same-time

हुक का उपयोग करना

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

const manager = useRef(createDndContext(HTML5Backend));

return (
  <DndProvider manager={manager.current.dragDropManager}>
      ....
  </DndProvider>
)

हुक का उपयोग करके एक बेहतर समाधान (धन्यवाद @jchonde):

import { DndProvider, createDndContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import React, { useRef } from "react";

const RNDContext = createDndContext(HTML5Backend);

function useDNDProviderElement(props) {
  const manager = useRef(RNDContext);

  if (!props.children) return null;

  return <DndProvider manager={manager.current.dragDropManager}>{props.children}</DndProvider>;
}

export default function DragAndDrop(props) {
  const DNDElement = useDNDProviderElement(props);
  return <React.Fragment>{DNDElement}</React.Fragment>;
}

तो आप कहीं और उपयोग कर सकते हैं:

import DragAndDrop from "../some/path/DragAndDrop";

export default function MyComp(props){
   return <DragAndDrop>....<DragAndDrop/>
}

मेरा समाधान:
बनाओ बच्चों घटक सीधे react-dnd आयात न करें।
माता-पिता से बच्चों के घटक के लिए DragDropContext और HTML5Backend ।

DragDropContextProvider टैग में एक अद्वितीय कुंजी जोड़ने से समस्या <DragDropContextProvider backend＝{HTML5Backend} key＝{Math. random()}></DragDropContextProvider> हल हो जाती है

टाइपस्क्रिप्ट में, मैंने नीचे घटक बनाया। ( साभार @jchonde @ttessarolo )

import { DndProvider, createDndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import React, { PropsWithChildren, useRef } from 'react';

const RNDContext = createDndContext(HTML5Backend);

function DragAndDrop({ children }: PropsWithChildren<{}>): JSX.Element {
  const manager = useRef(RNDContext);
  return <DndProvider manager={manager.current.dragDropManager}>{children}</DndProvider>;
}

export default DragAndDrop;

और इस तरह एक घटक का इस्तेमाल किया

function SomeComponent(): JSX.Element {
  return (
    <DragAndDrop>
      ...
    </DragAndDrop>
  );
}

DragDropContextProvider टैग में एक अद्वितीय कुंजी जोड़ने से समस्या <DragDropContextProvider backend＝{HTML5Backend} key＝{Math. random()}></DragDropContextProvider> हल हो जाती है

बहुत बढ़िया!