2

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

这是我的仪表板图像： 在此处输入图像描述

4

2 回答 2

2

如果您查看此处的文档，您会看到它ResponsiveGridLayout是一个名为的组件Responsive和一个名为的 HOC的组合WidthProvider

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

const ResponsiveGridLayout = WidthProvider(Responsive);

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

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

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

 const MyVeryOwnResponsiveGridLayout = MyWidthProvider(Responsive);

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

于 2021-01-03T13:19:50.323 回答
0

我找到了比扩展 WidthProvider 更好的答案：

触发 Window Resize 事件（不实际调整窗口大小）。我发现需要 1ms 的延迟才能使其工作。

请参阅此解决方案： https ://stackoverflow.com/a/62874552/17570516

于 2021-12-20T21:28:50.723 回答