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

네, 그것도 가능합니다!

터치 백 엔드에는 작동하지 않는 것 같습니다 ...
나는 시도했다
앱 = DragDropContext(TouchBackend({ enableMouseEvents: true }))(앱);
기본 연결 내보내기(mapStateToProps, mapDispatchToProps)(앱);
이 문제를 여기에 게시해야 하는지 잘 모르겠습니다. 감사 해요.

@longmfe App 는 어떻게 가져 오나요 ?

@jnrepo 답변 감사합니다.
그냥 수입합니다
import App from ../../somepath/App.js
내가 그것을 사용할 때 뭔가를 추가해야합니까?
BTW, 나는 이런 식으로 앱을 만듭니다.
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 콘솔은 이러한 방식으로 구성 요소를 배치합니다...