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

Question

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

这是我的仪表板图像：

​

Answer 1

如果您查看文档here，您将看到ResponsiveGridLayout是一个名为Responsive的组件和一个名为WidthProvider的临时组件的组合

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);

附注:您可以尝试向组件创建者或志愿者请求该功能，以便为项目做出贡献