React-dnd: redux connect 和 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);
导出默认连接(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);
非常感谢。 祝你今天过得愉快。

我在用 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 控制台以这种方式布置组件......