边栏打开时，React网格布局不会重绘

问题描述

除非进行窗口更新（例如打开开发人员工具），否则Grid布局网格不会改变形状。边栏打开时状态正在改变。

当我没有在<GridLayout>上设置width属性但没有宽度时，不会发生此问题。

我已附上3张屏幕截图以显示问题

1. 侧边栏已关闭。

   

2. 侧边栏打开，但网格位于其下方。

   

3. 打开开发人员工具（如果打开则甚至移动开发人员工具）会将网格捕捉到正确的位置。

   

我尝试了许多变体，包括可调整大小的网格，但无济于事。

相关代码为：

import RGL,{ WidthProvider,Layout } from "react-grid-layout";
import "../../../../../../node_modules/react-grid-layout/css/styles.css";
const GridLayout = WidthProvider(RGL);

  const defaultProps = {
    className: "layout",items: 20,rowHeight: 30,onLayoutChange: function(layout: any) {},cols: 12,};

  const [layoutState,setLayoutState] = useState(defaultProps);

  const generateDOM = () => {
    return _.map(_.range(layoutState.items),(i) => (
      <div key={i} style={{ border: "2px solid red",margin: "5px" }}>
        <span className="text">{i}</span>
      </div>
    ));
  };

  const generateLayout = () => {
    const p = layoutState;
    return _.map(new Array(p.items),function(item,i) {
      const y = _.result(p,"y") || Math.ceil(Math.random() * 4) + 1;
      return {
        x: (i * 2) % 12,y: Math.floor(i / 6) * (y as number),w: 2,h: y,i: i.toString(),};
    });
  };

  const [layoutS,setLayoutS] = useState(generateLayout());

  const onLayoutChange = (layout: any) => {
    layoutState.onLayoutChange(layout);
  };

  return (
    <>
      <SidebarMetrics />
      {console.log("Drawing")}
      <GridLayout
        layout={layoutS as Layout[]}
        onLayoutChange={onLayoutChange}
        {...state}
        style={{ width: "100%" }}
      >
        {generateDOM()}
      </GridLayout>
    </>
  );

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）