2

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

所以我能够做到这一点，并且工作正常。

我的 UI 就像我有两个选项卡，每个选项卡都有一些网格，所以当我从一个选项卡移到另外两个选项卡时，我正在显示该选项卡的网格。

我想要做什么

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

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

  • 所以我正在做的是，当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现在它正在采用布局，这是更新后的代码沙箱

4

1 回答 1

1

该解决方案为每个运行generateDOM一次active_menu：

  const [DOM, setDOM] = useState(null)  

  useEffect(() => {
    setDOM(generateDOM(data1[active_menu].comp_data))
  }, [data1, active_menu]);

data1也应该是依赖关系，因为"DOM"在添加和删除元素时需要重新计算。

使成为：

  <ResponsiveReactGridLayout
    {...props}
    onLayoutChange={(layout, layouts) => onLayoutChange(layout, layouts)}
    layouts={layouts}
    cols={{ lg: 12, md: 4, sm: 6, xs: 4, xxs: 2 }}
  >
    {DOM} 
  </ResponsiveReactGridLayout>

localStorage.getItem("active_tab")我也改成active_menu

密码箱

于 2021-03-19T12:01:54.643 回答