我通过向我的自定义添加“ref”来修复此问题<Panel/>
成分。仅当您的react-grid-layout 中有自己的组件(而不是带键的div)时,才会出现此错误。
要创建引用,只需执行以下操作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>
您的自定义面板将变为:
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>
);
});
注意React.forwardRef((props: IPanelProps, ref)
和支柱ref={ref}
.