zan-design出现react dnd报错

Question

报错信息：

Warning: Component EditorCard declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?

Warning: Failed context type: The context `dragDropManager` is marked as required in `DropTarget(DragSource(EditorCardItem))`, but its value is `undefined`.
    in DropTarget(DragSource(EditorCardItem)) (created by EditorCard)
    in div (created by EditorCard)
    in EditorCard (created by ShowCaseEditor)
    in div (created by ShowCaseEditor)
    in ShowCaseEditor (created by Droppable)
    in div (created by DesignEditorItem)
    in DesignEditorItem (created by Droppable)
    in div (created by DesignPreviewItem)
    in DesignPreviewItem (created by Droppable)
    in div (created by Droppable)
    in DroppableDimensionPublisher (created by Connect(DroppableDimensionPublisher))
    in Connect(DroppableDimensionPublisher) (created by Droppable)
    in Droppable (created by Connect(Droppable))
    in Connect(Droppable) (created by DesignPreview)
    in div (created by DesignPreview)
    in DragDropContext (created by DesignPreview)
    in DesignPreview (created by Design)
    in div (created by Design)
    in Design (at index.js:141)
    in div (at index.js:139)
    in Create (created by Route)
    in Route (created by withRouter(Create))
    in withRouter(Create) (created by Route)
    in Route (at routes.js:21)
    in Switch (at routes.js:20)
    in Router (created by BrowserRouter)
    in BrowserRouter (at routes.js:19)
    in Routes (at index.js:13)
    
    Uncaught Error: Could not find the drag and drop manager in the context of DragSource(EditorCardItem). Make sure to wrap the top-level component of your app with DragDropContext. Read more: http://react-dnd.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context
    at invariant (browser.js:38)
    at new DragDropContainer (decorateHandler.js:102)
    at constructClassInstance (react-dom.development.js:6355)
    at updateClassComponent (react-dom.development.js:7839)
    at beginWork (react-dom.development.js:8225)
    at performUnitOfWork (react-dom.development.js:10224)
    at workLoop (react-dom.development.js:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at renderRoot (react-dom.development.js:10366)
    at performWorkOnRoot (react-dom.development.js:11014)
    at performWork (react-dom.development.js:10967)
    at requestWork (react-dom.development.js:10878)
    at scheduleWorkImpl (react-dom.development.js:10732)
    at scheduleWork (react-dom.development.js:10689)
    at Object.enqueueSetState (react-dom.development.js:6212)
    at Design../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:237)
    at Design.onSelect (Design.js:773)
    at onAdd (Design.js:817)
    at DesignEditorAddComponent.js:100
    
    The above error occurred in the <DropTarget(DragSource(EditorCardItem))> component:
    in DropTarget(DragSource(EditorCardItem)) (created by EditorCard)
    in div (created by EditorCard)
    in EditorCard (created by ShowCaseEditor)
    in div (created by ShowCaseEditor)
    in ShowCaseEditor (created by Droppable)
    in div (created by DesignEditorItem)
    in DesignEditorItem (created by Droppable)
    in div (created by DesignPreviewItem)
    in DesignPreviewItem (created by Droppable)
    in div (created by Droppable)
    in DroppableDimensionPublisher (created by Connect(DroppableDimensionPublisher))
    in Connect(DroppableDimensionPublisher) (created by Droppable)
    in Droppable (created by Connect(Droppable))
    in Connect(Droppable) (created by DesignPreview)
    in div (created by DesignPreview)
    in DragDropContext (created by DesignPreview)
    in DesignPreview (created by Design)
    in div (created by Design)
    in Design (at index.js:141)
    in div (at index.js:139)
    in Create (created by Route)
    in Route (created by withRouter(Create))
    in withRouter(Create) (created by Route)
    in Route (at routes.js:21)
    in Switch (at routes.js:20)
    in Router (created by BrowserRouter)
    in BrowserRouter (at routes.js:19)
    in Routes (at index.js:13)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Design component.

问题出现：

1. https://github.com/youzan/zen... 跑起来没有问题的
2. 使用creaet-react-app 创建项目并引入zan-design 引入魔方和橱窗组件点击时候会出现以上问题导致页面无法显示
3. 使用create-react-app 新建项目并提取demo的client文件夹部分跑起项目，同样出现以上问题。
4. 如果由于react dnd 找不到context问题为何官网demo没有暴露？

Answer 1

ReactDnd需要一层包裹，需要你自己包一下，可以参考以下代码

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

class YourApp {
/ ... /
}

export default DragDropContext(HTML5Backend)(YourApp);

Answer 2

The context dragDropManager is marked as required in DropTarget(DragSource(EditorCardItem)), but its value is undefined.

这里提示的错误是在DropTarget组件里，你使用了propTypes来设置dragDropManager为required，但却没定义。你看看你dragDropManager有没有传过去

Answer 3

home.propTypes = {

}
这里的propTypes 是首字母小写的，不是PropTypes

你的报错的第一句 Component EditorCard declared PropTypes instead of propTypes说的很明显了