react-dnd使用遇到问题总结

1.使用时出现Cannot have two HTML5 backends at the same time

原来我们一直把App外层包裹成provider，但是不管怎么变，外层的prodvider都不会变化（也就是在一个页面操作的话，不会重新渲染），因为一直变化的是App内部

import React from "react";
import {render} from "react-dom";
import App from "./components/App";
import {DragDropContextProvider} from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reducer from "./reducer";

let store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
render(
    <DragDropContextProvider backend={HTML5Backend}>
        <Provider store={store}>
            <App/>
        </Provider>
    </DragDropContextProvider>
    , document.getElementById("root"));

这里是原先代码
当我要把这个这个当成一个系统中的一个小组件时，这时候，这个provider就会被渲染好多次，那么现在，
原先我直接把代码移植，然后改了下provider

import React from "react";
import HTML5Backend from 'react-dnd-html5-backend'
import {DragDropContextProvider} from 'react-dnd'
import DragAndDropHOC from  './DragAndDropHOC'

import App from './App'

export default (props) => {
  return (
    <DragDropContextProvider backend={HTML5Backend}>
      <App/>
    </DragDropContextProvider>
  )
}

这里就要问了，为什么把内部那个去掉，这个时候这个已经成组件了，已经包裹在项目的最外层了
后来浏览器一运行就报错，一开始我很纳闷，我只在组件中使用了一次，为啥就报两次，后来我看开发工具，然后查看官方issue才了解
地址:https://github.com/react-dnd/react-dnd/issues/186
大概意思是需要我们给context设置唯一标识，这里我的解决
先用HOC高阶组件包裹一层

import React from 'react'
import {DragDropContext} from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

const DragAndDropHOC = props => {
  return <React.Fragment>
    {props.children}
  </React.Fragment>
};

export default {
  HTML5: DragDropContext(HTML5Backend)(DragAndDropHOC),
  //Touch: DragDropContext(TouchBackend)(DragAndDropHOC),
}

然后调用的地方就是这样了

import React from "react";
import DragAndDropHOC from  './DragAndDropHOC'

import App from './App'

export default (props) => {
  return (
    <DragAndDropHOC.HTML5 {...props}>
      <App/>
    </DragAndDropHOC.HTML5>
  )
}

其实这样做的目的很简单，就是保证一个系统存在一个DragDropContext