React-dnd: استخدام اتصال redux و رد فعل 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);

نعم ، هذا سيعمل أيضًا!

يبدو أنه لا يعمل من أجل اللمس الخلفي ...
حاولت
التطبيق = DragDropContext (TouchBackend ({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);
شكرا جزيلا. طاب يومك.

أواجه مشكلة في التفاف مكون الجذر الخاص بي باستخدام DragDropContext. في وحدة التحكم أحصل على:
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).

أي أدلة على ما قد يسبب هذه المشكلة؟ لا أعتقد أنني أقوم بتضمين نسخ متعددة من React. كان هذا يعمل بشكل مثالي قبل التفاف المكون الجذر باستخدام DragDropContext. شكرا!

لقد تم تكوين 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;

تحدد وحدة التحكم في React المكونات بهذه الطريقة ...