react-redux - React + Redux + React-dnd 上的应用程序组装后无法运行，为什么？

Question

运行测试脚本时出现错误

不变违规:在“Connect (DragD)”上下文中找不到“store”ropContext (App)) "。将根组件包装在 a 中，或将自定义 React 上下文提供程序传递给连接选项中对应的 React 上下文 Consumer Connect (DragDropContext (App))。

虽然一切都在未组装的项目中运行。据我了解，由于根组件被包装在两个临时组件中，因此存在一些问题 - 一个是 redox，另一个是 dnd。

ReactDOM.render(<DragDropContextProvider backend={HTML5Backend}>
                    <Provider store={store}>
                        <App />
                    </Provider>
                </DragDropContextProvider>, document.getElementById('root'));

我尝试先用 dnd 换行，然后用 redaks 换行 - 这没有帮助，一切都是一样的。

Answer 1

您似乎将旧版装饰器 API 与顶级 API 混淆了

旧版装饰器 API

使用遗留装饰器，您可以按如下方式包装:

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

class YourApp {
  /* ... */
}

export default DragDropContext(HTML5Backend)(App)

查看有关 Legacy Decorator API 的文档 here...

顶级 API

对于您使用的顶级 API:

import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
....
...
        <div className="App">
            <DndProvider backend={HTML5Backend}>
                <App />
            </DndProvider>
        </div>

查看顶级API的文档here...