React-dnd: रेडक्स कनेक्ट और रिएक्ट-डीएनडी का उपयोग

हाँ, आप इसे इस तरह कर सकते हैं:

import { connect } from "react-redux";
import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";

class App extends Component {
  ...
}

App = DragDropContext(HTML5Backend)(App);
export default connect(mapStateToProps)(App);

बेझिझक फिर से खोलें :)।

आह मैं भी उसी तरह कोशिश करूँगा। क्या flow भी एक और स्वीकार्य तरीका होगा?

import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import flow from 'lodash/flow'

export default flow(
  connect(selector),
  DragDropContext(HTML5Backend)
)(ExperienceEditor);

हाँ, वह भी काम करेगा!

ऐसा लगता है कि यह टच बैक एंड के लिए काम नहीं करता है ...
मैंने कोशिश की
ऐप = ड्रैगड्रॉपकॉन्टेक्स्ट (टचबैकएंड ({enableMouseEvents: true})) (ऐप);
निर्यात डिफ़ॉल्ट कनेक्ट (mapStateToProps, mapDispatchToProps) (ऐप);
मुझे यकीन नहीं है कि मुझे इस मुद्दे को यहां पोस्ट करना चाहिए। धन्यवाद।

@longmfe आप App कैसे आयात कर रहे हैं?

@jnrepo उत्तर के लिए धन्यवाद।
मैं अभी इसे आयात करता हूँ
import App from ../../somepath/App.js
क्या मुझे इसका उपयोग करते समय कुछ जोड़ना चाहिए?
बीटीडब्ल्यू, मैं इस तरह ऐप बनाता हूं
import {connect} from react-redux
import {bindActionsCreators} from redux
class App extends Component {
}
App = DragDropContext(TouchBackend({ enableMouseEvents: true }))(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);
बहुत - बहुत धन्यवाद। आपका दिन शुभ हो।

मुझे अपने मूल घटक को ड्रैगड्रॉपकॉन्टेक्स्ट के साथ लपेटने में कोई समस्या है। कंसोल में मुझे मिलता है:
Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's रेंडर method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

इस मुद्दे का कारण क्या हो सकता है इसके बारे में कोई सुराग? मुझे नहीं लगता कि मैं रिएक्ट की कई प्रतियाँ शामिल कर रहा हूँ। ड्रैगड्रॉपकॉन्टेक्स्ट के साथ रूट घटक को लपेटने से पहले यह पूरी तरह से काम कर रहा था। धन्यवाद!

मेरे पास root.js कॉन्फ़िगर किया गया है:
import { Component } from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

class Root extends Component {
render() {
return <div>
{React.cloneElement(this.props.children, this.props)}
</div>;
}
}

export default DragDropContext(HTML5Backend)(Root);

और App.js के रूप में:
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Root from './root';

function mapStateToProps(state) {
return {
...
}
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({
...
}, dispatch)
}

const App = connect(mapStateToProps, mapDispatchToProps)(Root);

export default App;

रिएक्ट कंसोल इस तरह से घटकों को निर्धारित करता है ...