问题标签 [react-grid-layout]

我在我的州有以下布局

加载到这个 responsivegridlayout 组件中

它工作正常，但每当我想在这个函数的布局中添加一个新元素时

当我将元素推入布局状态时，它会被添加到不正确的位置并以尽可能小的尺寸添加。只有在我手动调整浏览器大小后，它才会正确对齐。

请记住，如果我最初渲染添加的元素，它会渲染在正确的位置

我在具有可扩展/可折叠侧栏的容器中使用响应式反应网格布局。截至目前，当 RGL 加载所有数据网格项目时，它看起来很完美，但是当我展开/折叠侧边栏（这会更改 RGL 的父 div 大小）时，RGL 项目不会自动调整大小。它适用于调整窗口大小，但不适用于更改容器大小。我尝试过实用地修改高度/宽度，然后占位符和拖放开始失败

任何人都有一个快速的解决方案

React 初学者在这里尝试制作投资组合。我遇到了一个问题，我找不到任何答案，因此在这里发布。

我的项目使用 react-mdl，尤其是项目页面，它使用了一个<Grid/>组件。当我在移动界面中查看我的项目时（在 FireFox 和 Chrome 开发工具以及移动设备 (OnePlus 7 Pro) 上进行了测试），我得到了我想要的布局。然而，当我将相同的代码推送到 Github Pages 时，布局明显不同，而且肯定不吸引眼球。

以下屏幕截图应该更好地解释它

本地主机视图

Github 页面视图

我不一定确定到底是什么导致了这个问题，并且已经尝试了多个“修复”，不幸的是到目前为止还没有解决，并且非常感谢朝着正确的方向推动。

我也为链接代码而不是直接发布它而道歉，但是，由于文件相对较大，我不希望用那么多媒体把帖子弄得乱七八糟。

提前感谢您，如果我能提供更多信息，请告诉我，我将非常高兴。

我正在使用 react-grid-layout 构建仪表板应用程序，并且遇到了一些我不理解的行为。

我创建了以下代码框来展示问题：

https://codesandbox.io/s/spring-dream-b4c06?file=/src/App.js

具体什么时候

• 单击“添加小框”两次，我得到了两个框，这是我所期望的。
• 但是，之后单击“添加大框”时，大框垂直放置在中间，上面有一个小框，下面有一个小框。

怎么会这样？

注意：我需要保持布局状态，因为我将它保存在我真实应用程序的 redux 存储中。

我正在使用 react-grid-layout 尝试制作可调整大小的网格。我还尝试添加删除网格项的功能。但是，在删除网格项（实际上只是从传入的布局对象中删除该项）后，网格项将更改为可能的最小尺寸，但仍留在屏幕上。这有什么原因吗？输入图片说明在这里

从布局中删除之前

从布局中删除后

这是布局对象：

前

删除后

删除后和调用 onLayoutChange 时

为什么删除的网格项仍然出现在屏幕上？我通过从布局对象中删除该网格项来删除它 onClick 的“X”按钮，但是，在删除它之后，立即调用 onLayoutChange 方法，并将该“卡片”添加回布局对象，只需最小的尺寸。这有什么原因吗？我是使用 react-grid-layout 的新手，如果我做错了什么，请告诉我！

这是我的网格代码

谢谢大家

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

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

我附上了 3 个屏幕截图来显示问题

1. 侧边栏已关闭。

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

3. 打开开发者工具（或者甚至移动开发者工具，如果它们打开的话）会将网格捕捉到正确的位置。

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

相关代码为：

tl;博士：

当启用和禁用（切换）静态选项时， React-grid-layout会错误地移动所有网格项。我希望网格项目在静态时被冻结在适当的位置，并且当且仅当用户在禁用静态模式的情况下移动它们时才移动。可以在此处 (CodeSandbox) 找到问题的示例，并在此处 (Imgur)提供GIF 示例。

背景

我正在使用react-grid-layout为我的应用程序制作交互式网格布局。我有一个按钮可以在网格中的所有项目的非静态（可拖动和可调整大小）和静态（非交互）模式之间切换（关于 react-grid-layout 中的静态信息）。我正在使用此答案useState中的提示和提示这样做：

预期行为：

网格中的每个元素都有独特的属性，这些属性定义了它在网格布局上的位置、大小等。这些在上面显示的layout变量中定义。在静态和非静态模式之间切换时，所有值都应该保持不变，除了static每个对象中的键。屏幕上的位置和大小也应该保持不变。这使用户能够关闭静态模式以更改网格项目的位置/大小，并打开以将它们“冻结”在它们离开它们的位置/大小。

当前（错误）行为：

我的问题是当我处于非静态模式时，我将网格项目拖到我想要的位置，然后打开静态模式，它们会重置到之前的位置。IE：

我将元素 A 拖到堆栈的底部，当我打开静态模式时，它会移动到堆栈的中间，然后将其重新关闭会将元素 A 返回到堆栈的顶部。然后元素 A 将在中间和顶部之间循环，具体取决于静态模式是打开还是关闭。

这是我的意思的一个例子：

我尝试过的：

• 如片段（注释代码）所示，我尝试重新创建该toggleStaticMode函数以提供更多详细信息。我创建了isStatic状态，并在每次点击时设置它的新值。
• 我还尝试更改位置以查看是否可以在点击时看到位置更改，我可以。如果不对大小和位置进行任何修改，值将保持不变，但屏幕上的位置和/或大小会发生变化。
• 我还尝试更改static每个对象的值以保持为真或假以记录更改。当 objecta和c's 的static值为 true 并且b's 是时isStatic，切换静态模式会改变b, 以及aand的位置c。控制台中打印的值表示它们没有改变。

以上都没有告诉我发生了什么或为什么会这样。文档也没有提供太多关于此的信息。

一种可能有效的“hackish”解决方案是使用此示例中的本地存储/cookie ，但我不想在每次用户切换静态模式时都这样做。此解决方案实际上可能无法解决此问题。

这可能是一个错误，但如果可能的话，我想找到一个更好的解决方法。

使用的完整代码：

我还将这段代码上传到 CodeSandbox，以展示我当前问题的完整工作示例。此示例在使用反应类/状态和 not 的方式上有所不同useState，但会出现相同的问题。此示例显示切换静态模式时大小/位置值的变化。

编辑：

某人 Special的回答让我朝着正确的方向前进，但是，当列重新排列为小于最小尺寸的值时，项目再次在切换时分散。一个例子可以在这里查看。

我正在使用带有 Laravel 7、AdminLTE 的 react-grid-layout 并且我有一个很好的结果：

我想把这个结果放在一个表格中，如下所示，有标题和行：

你建议我在 reactjs 或简单的 html 中这样做吗？

如果您有示例代码，我很感兴趣。

这是我的代码：

先感谢您。

我正在使用 react-grid-layout 创建调度程序：

在此处输入链接描述

我想知道这是否可以将布局保存到 mysql 数据库中并恢复它？

我的想法是将信息存储在本地存储中，并将本地存储内容传输到 MySQL...

https://strml.github.io/react-grid-layout/examples/7-localstorage.html

我希望这是可能的，因为我们花了很多时间来得到这个结果。

我正在使用 React-Grid-Layout 构建一个仪表板，该仪表板由包含小部件（即图表、日历等）的网格组成。每个网格都可以拖动、响应和调整大小（网格中的小部件也会调整大小）。

我的代码；

在此处的代码沙盒上进行现场演示。

只有一张图表可以根据网格高度和宽度的变化调整大小。看来我只是将维度更改传递给一个 div 而不是其余的。如何让所有图表都跟随网格调整大小而不是一个？