React-dnd: Penggunaan redux connect dan react-dnd

Ya, Anda dapat melakukannya seperti ini:

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);

Jangan ragu untuk membuka kembali :).

ah saya akan mencoba cara itu juga. Apakah menggunakan flow juga merupakan metode lain yang dapat diterima?

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);

Ya, itu juga akan berhasil!

Tampaknya itu tidak berfungsi untuk ujung belakang sentuh ...
Saya mencoba
Aplikasi = DragDropContext(TouchBackend({ enableMouseEvents: true }))(Aplikasi);
ekspor default connect(mapStateToProps, mapDispatchToProps)(App);
Saya tidak yakin apakah saya harus memposting masalah ini di sini. Terima kasih.

@longmfe bagaimana Anda mengimpor App ?

@jnrepo Terima kasih atas jawabannya.
Saya hanya mengimpornya
import App from ../../somepath/App.js
haruskah saya menambahkan sesuatu ketika saya menggunakannya?
BTW, saya membuat Aplikasi seperti ini
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);
Terima kasih banyak. Semoga harimu menyenangkan.

Saya mengalami masalah saat membungkus komponen root saya dengan DragDropContext. Di konsol saya mendapatkan:
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 render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Adakah petunjuk tentang apa yang mungkin menyebabkan masalah ini? Saya tidak berpikir saya menyertakan banyak salinan React. Ini bekerja dengan sempurna sebelum membungkus komponen root dengan DragDropContext. Terima kasih!

Saya memiliki root.js yang dikonfigurasi sebagai:
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);

Dan App.js sebagai:
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;

Konsol React menyusun komponen dengan cara ini...