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

【问题标题】：How can re-render react-grid-layout column's width on parent's resizing?如何在父级调整大小时重新渲染 react-grid-layout 列的宽度？
【发布时间】：2021-04-09 07:55:24
【问题描述】：

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

这是我的仪表板图像：

【问题讨论】：

标签： javascript reactjs react-grid-layout

【解决方案1】：

如果您查看文档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);

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

【讨论】：

非常感谢您的回答@NadiaChibrikova，确实，我阅读了很多它的文件，但没有找到我的问题的答案。感谢您的解决方案。你能帮我做一个提供者吗？
@N.SH 不幸的是，他们没有为扩展留下太多空间，如果你想坚持使用这个库，你将不得不复制 WidthProvider，将 componentDidUpdate 添加到组件并从中调用 onWindowResize。然后你可以在侧边栏显示/隐藏时更新组件的道具，React 将调用 componentDidUpdate 并且你的网格将获得新的宽度
非常感谢@NadiaChibrikova，我一定会试试你的解决方案
@N.SH 你找到答案了吗？
@mlisthenewcool 我在 github 中为这个问题创建了一个问题，这可以帮助你 github.com/react-grid-layout/react-grid-layout/issues/…

【解决方案2】：

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

触发 Window Resize 事件（不实际调整窗口大小）。我发现它需要延迟 1 毫秒才能正常工作。

查看此解决方案： https://stackoverflow.com/a/62874552/17570516

【讨论】：