我正在使用react-grid-layout并创建一些可拖放和可调整大小的网格。

所以我能够实现这一目标并且它运行良好。

我的用户界面就像我有两个选项卡，每个选项卡都有一些网格，所以当我从一个选项卡移动两个其他选项卡时，我会显示该选项卡的网格。

我正在尝试做什么

在更改布局时，我想将该布局存储到本地存储，以便当我再次刷新或打开该选项卡时，网格的形成应该是我更改的那个。

所以按照图书馆中提到的，我正在使用这个

• 所以我所做的是每当onLayoutChange发生时我都在存储与我相关的布局，active_tab当我从一个选项卡更改为另一个选项卡时，我正在检查本地存储并匹配哪个选项卡处于活动状态并获取该特定布局。
• 但这并没有发生，它只是采用了基本布局。

我做了什么

    function getFromLS(key) {
  let ls = {};
  if (global.localStorage) {
    try {
      ls =
        JSON.parse(
          global.localStorage.getItem(localStorage.getItem("active_tab"))
        ) || {};
    } catch (e) {
      /*Ignore*/
    }
    return ls[key];
  }
}
function saveToLS(key, value) {
  if (global.localStorage) {
    global.localStorage.setItem(
      localStorage.getItem("active_tab"),
      JSON.stringify({
        [key]: value
      })
    );
  }
}

• 布局的onchange函数

   const onLayoutChange = (layout, layouts) => {
   saveToLS("layouts", layouts);
   console.log("onchange");
   setlayouts({ layouts });
    };
  

编辑/更新

我已经更新了我的代码沙箱，因为它之前在控制台上进行布局，undefined现在它正在采用布局，这是更新后的代码沙箱