React-dnd: Verwendung von Redux Connect und React-dnd

Ja, Sie können es so machen:

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

Gerne wieder öffnen :).

ah so werde ich es auch versuchen. Wäre die Verwendung von flow auch eine andere akzeptable Methode?

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

‎Ja, das würde auch gehen!

Es scheint, dass es für das Touch-Backend nicht funktioniert...
Ich habe es versucht
App = DragDropContext(TouchBackend({ enableMouseEvents: true }))(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);
Ich bin mir nicht sicher, ob ich dieses Thema hier posten soll. Vielen Dank.

@longmfe wie importierst du App ?

@jnrepo Danke für die Antwort.
Ich importiere es einfach
import App from ../../somepath/App.js
sollte ich etwas hinzufügen, wenn ich es verwende?
Übrigens, ich erstelle eine App wie diese
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);
Danke vielmals. Einen schönen Tag noch.

Ich habe ein Problem beim Umschließen meiner Stammkomponente mit dem DragDropContext. In der Konsole bekomme ich:
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 rendern method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Irgendwelche Hinweise, was dieses Problem verursachen könnte? Ich glaube nicht, dass ich mehrere Kopien von React hinzufüge. Dies funktionierte perfekt, bevor die Root-Komponente mit DragDropContext umschlossen wurde. Vielen Dank!

Ich habe root.js konfiguriert als:
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);

Und App.js als:
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;

Die React-Konsole legt die Komponenten auf diese Weise an...