React-dnd: reduxconnectと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);

はい、それでもうまくいきます！

タッチバックエンドでは動作しないようです...
私は試した
App = DragDropContext（TouchBackend（{enableMouseEvents：true}））（App）;
デフォルトのconnect（mapStateToProps、mapDispatchToProps）（App）;をエクスポートします。
この問題をここに投稿する必要があるかどうかはわかりません。 ありがとう。

@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);
どうもありがとう。 良い1日を。

ルートコンポーネントを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コンソールはこのようにコンポーネントをレイアウトします...