Reactjs 反应网格布局错误：<；DragableCore>；未安装在DragStart上

当尝试在ResponsiveGridLayout中拖动或调整任何面板的大小时，我遇到以下错误：

未安装在DragStart上

以下是我的网格布局：

<ResponsiveGridLayout
        className="layout"
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        onLayoutChange={(layout, allLayouts) => handleLayoutChange(allLayouts)}
        rowHeight={30}
        layouts={layouts}
        measureBeforeMount={false}
        compactionType="vertical"
        useCSSTransforms={true}
    >
        <Panel key="a" title="Interactions per country">
            <PieGraph />
        </Panel>
    </ResponsiveGridLayout>

handleLayoutChange（所有布局）}
行高={30}
布局={layouts}
measureBeforeMount={false}
compactionType=“垂直”
UseCStransForms={true}
>

以下是每个单独的面板：

export const Panel: React.FC<IPanelProps> = (props) => {
const {className, children, title, shouldScroll, ...defaultPanelProps} = props;
let scrollClass = shouldScroll ? " scroll-y" : "";

return (
    <div {...defaultPanelProps} className={`custom-panel wrapper ${className}`} >
            {title && <div className="custom-panel-title text-medium">{title}</div>}

            <div className={`custom-panel-content ${scrollClass}`} onMouseDown={ e => e.stopPropagation() }>
                {children}
            </div>
    </div>
);

export const面板：React.FC=（道具）=>{
const{className，children，title，shouldcoll，…defaultPanelProps}=props；
让scrollClass=shouldScroll？“scroll-y”：“”；
返回(
{title&&{title}
e、 stopPropagation（）}>
{儿童}
);

})
 我通过在自定义
组件中添加一个“ref”来解决这个问题。只有在react网格布局中有自己的组件（而不是带有键的div）时，才会出现此错误

要创建ref，只需执行
const ref=React.createRef（）
并将其传递给自定义面板组件，如下所示：

<ResponsiveGridLayout
        className="layout"
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        onLayoutChange={(layout, allLayouts) => handleLayoutChange(allLayouts)}
        rowHeight={30}
        layouts={layouts}
        measureBeforeMount={false}
        compactionType="vertical"
        useCSSTransforms={true}
    >
        <Panel ref={ref} key="a" title="Liters per active country">
            <PieGraph />
        </Panel>
    </ResponsiveGridLayout>

handleLayoutChange（所有布局）}
行高={30}
布局={layouts}
measureBeforeMount={false}
compactionType=“垂直”
UseCStransForms={true}
>

您的自定义面板将变为：

export const Panel = React.forwardRef((props: IPanelProps, ref) => {
const { className, children, title, shouldScroll, ...defaultPanelProps } = props as any;
let scrollClass = shouldScroll ? " scroll-y" : "";

return (
    <div ref={ref} {...defaultPanelProps} className={`custom-panel wrapper ${className}`} >

        {title && <div className="custom-panel-title text-medium">{title}</div>}

        <div className={`custom-panel-content ${scrollClass}`} onMouseDown={e => e.stopPropagation()}>
            {children}
        </div>
    </div>
);

export const Panel=React.forwardRef（（道具：IPanelProps，ref）=>{
const{className，children，title，shouldcoll，…defaultPanelProps}=props，如有；
让scrollClass=shouldScroll？“scroll-y”：“”；
返回(
{title&&{title}
e、 stopPropagation（）}>
{儿童}
);

}))

注意
React.forwardRef（（props:IPanelProps，ref）
和
ref={ref}
的prop