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