如何在父级调整大小时重新渲染 react-grid-layout 列的宽度？

问题描述

我有一个使用 react js 的仪表板面板，我在其中使用了 react-grid-layout；我在我的内容中使用了 react-grid-layout 并且工作正常，但是当我关闭右侧或左侧面板（抽屉）时，作为我的 react-grid-layout 父级的内容的宽度会修改，但在此更改之后我的列的宽度没有根据其父级的宽度大小进行修改；如何重新加载我的 ResponsiveGridLayout 组件以更改子（列）宽度？ 这是在这个问题中显示我的问题的简单代码： example

这是我的仪表盘图片：

解决方法

如果您查看文档 here，您会看到 ResponsiveGridLayout 是名为 Responsive 的组件和名为 WidthProvider 的 HOC 的组合

import { Responsive,WidthProvider } from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(Responsive);

如果您查看 WidthProvider 的 code，您可能会注意到它订阅了 widnow resize 事件

window.addEventListener("resize",this.onWindowResize);

这对您来说不是特别有用，因为在您的情况下窗口不会调整大小。处理此问题的一种方法是创建您自己的 WidthProvider 并将侦听器附加到实际调整大小的元素并将其包裹在 Responsive

 const MyVeryOwnResponsiveGridLayout = MyWidthProvider(Responsive);

附言您可以尝试向组件创建者请求该功能或自愿为项目做出贡献