Reactjs 侧边栏打开时不重新绘制网格布局

网格布局网格不会改变形状，除非有窗口更新，例如打开开发人员工具。侧边栏打开时，中的状态正在更改

如果我没有在

上设置宽度属性，但没有宽度，则不会出现此问题

我附上了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>
    </>
  );

从“react grid Layout”导入RGL，{WidthProvider，Layout}；
导入“../../../../../../../../node_modules/react grid layout/css/styles.css”；
const GridLayout=WidthProvider（RGL）；
const defaultProps={
类名：“布局”，
项目：20，
行高：30，
onLayoutChange:函数（布局：任意）{}，
科尔斯：12，
};
const[layoutState，setLayoutState]=useState（defaultProps）；
const generateDOM=（）=>{
return.map（u.range（layoutState.items），（i）=>(
{i}
));
};
const generateLayout=（）=>{
const p=布局状态；
返回映射（新数组（p.items），函数（item，i）{
常数y=uu.result（p，“y”）| | Math.ceil（Math.random（）*4）+1；
返回{
x:（i*2）%12，
y：数学楼层（i/6）*（y为编号），
w:2，
h:y，
i:i.toString（），
};
});
};
const[layoutS，setLayoutS]=useState（generateLayout（））；
const onLayoutChange=（布局：任意）=>{
layoutState.onLayoutChange（布局）；
};
返回(
{console.log（“绘图”）}
{generateDOM（）}
);