问题标签 [react-grid-layout]

我正在使用vue-responsive-dash库在网格中显示响应式图块，尽管在通过单击按钮添加新项目时遇到问题。如果我不调整项目大小，它工作正常。花了几个小时后，我发现占位符项目位于第一个项目之后。

您可以在此处重现问题： https ://codesandbox.io/s/vue-responsive-dash-wbgs8

脚步：

1. 单击“添加”按钮并添加第一项。
2. 调整添加项目的大小。
3. 单击“添加”按钮添加另一个项目。
4. 查看第一项和第二项之间的空格。**

我可以做些什么来删除这个空间吗？

我正在使用带有图像和两列文本的react-grid-system，如下所示：

在此，我希望图像和所有文本垂直位于行的中间。我在这里阅读了文档，但找不到与垂直对齐相关的任何内容。

使用react-grid-layout，当用户将可拖动项目拖到网格上时，是否可以从网格外部指定可拖动项目的大小？目前，默认值似乎是w: 1, h:1，但是我没有看到任何可以设置它的地方。

此外，是否可以指定有关发送到onDrop处理程序函数的可拖动项目的任何详细信息？目前仅限于(layout: Layout[], item: Layout, e: Event)

这是 RGL 从外部拖动的示例： https ://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html

我有一个使用 react js 的仪表板面板，我在其中使用了 react-grid-layout；我在我的内容中使用了 react-grid-layout 并且可以正常工作，但是当我关闭右侧或左侧面板（抽屉）时，作为我的 react-grid-layout 父级的内容的宽度会修改但在此更改之后我的列的宽度没有根据其父级的宽度大小进行修改；如何重新加载我的 ResponsiveGridLayout 组件以更改子项（列）宽度？这是在这个问题中显示我的问题的简单代码： 示例

这是我的仪表板图像：

我一直在研究 react-grid-layout 以在屏幕上显示和移动图形。目前我能够将 plotly.js 图添加到容器中。它是可移动的，但不会随容器调整大小。我想知道是否需要一个异步函数来允许在调整容器框大小时重新渲染绘图。下面是网格布局的代码，以及直方图的代码。

以下是使用 plotly.js 的直方图代码：

我用来将图形元素输入到网格中的 Redux reducer：

我是一个非常活跃的 Dash 用户，我开始发现我的 Dash 使用有很多限制，我意识到关于如何将组件转换为 dash 的信息/内容是绝对有限的，有过时且非常简单的示例......并且我对 Javascript 或 React 几乎一无所知，我完全不知道如何转换组件。

我正在尝试将 Responsive Grid Layout 组件从 react.js 转换为 Plotly Dash 但我不知道在这种情况下我应该如何处理这些属性？组件链接： https ://github.com/STRML/react-grid-layout/blob/master/lib/ResponsiveReactGridLayout.jsx

由于我没有使用 react.js 的经验，我很困惑我应该做哪些修改才能将此组件转换为 Plotly Dash。

在上面的组件的情况下，我应该只在 Proptypes 上声明属性（如下所示）还是需要做更多的修改？

非常欢迎任何帮助或参考...

问候，莱昂纳多

我有一个反应网格布局，并且正在使用 redux 来管理我的网格元素的状态。我可以添加包含我想要的内容的网格项目，它们可以在网格周围移动并按照我想要的方式调整大小。问题是当我更改网格大小或位置时，它不会更新 redux 存储中的状态，因此当我离开仪表板页面并返回它时，网格对象会重置为其初始状态。我想使用一个动作来更新布局，并尝试在下面的庄园中这样做，尽管当我尝试控制台记录我的布局时，我发现它没有更新。

这是我的减速器，包括 addItem：

这是我的反应网格布局的代码。我想在每次更改布局时更新布局 - 这可以使用 onLayoutChange 属性来完成。

我正在使用react-grid-layout制作drag-drop and resize components，所以我能够实现文档中提到的功能。

我的问题

• 我正在创建动态 UI，所以我正在用数据渲染我的 UI。
• 在这个库中，我需要创建类似的布局{ {i: 'a', x: 0, y: 0, w: 1, h: 2}
• 当我创建静态 UI 时，我能够实现我想要的。这是工作代码沙箱

在具有预定义布局的静态 UI 中，我确实喜欢下面。

这工作正常，但这里我定义的布局是静态的，所以为此我搜索并获得了一个动态高度和宽度的示例，它正在创建一个动态布局。

但这只是用我的 UI 中没有显示的随机数创建布局（根据我的使用），这是我在动态 UI 库中发现的

我想要做什么

我有这些数据，就像我所在的州一样

通过上述数据，我正在根据需要创建 Ui

传递key和创造动态layout是我无法弄清楚如何实现这一点的地方，因为这对我来说是全新的事情。

我的 UI 是完全动态的 每次我要获取动态数据时，我需要显示很多卡片或 div。

这是我正在尝试动态执行的代码沙盒

编辑/更新

我得到的答案@Daniil Loban非常有帮助，但是当我尝试循环使用我的实时数据时，它会循环两次，这是因为我的数据与我在这里显示的有点不同

实际上我无法理解I use data1.EmpData[l.i] to get data to display when I map layout.这条线。

我的数据

]

• 数据的走向就像公司->该公司的雇员->该公司的数据，
• 所以这里的公司可以是多个雇员，也可以是多个类似的数据
• 我在之前的数据中更新的内容我没有提到公司，因为我想编写最少的代码。
• 我现在添加了完整的代码，这是我的代码沙箱

问题

• 问题是重复数据，我正在显示重复数据

• 我会在这里解释， company namme->companydata->employe name这样应该是完美的，但正在发生的事情是 -- companyname-> 在一个 div 中都雇用了我，得到，而在另一个我得到了两个

应该是因为Info有两个雇员，所以在一个网格中一个雇员，在另一个网格中另一个雇员。

问题出在generateDOM这个函数中，因为布局是完美生成的，但在一个布局中，它对其他布局重复所有相同，如果长度为 3，那么它正在创建 3 个布局，这完全没问题，但在一个布局中，它是 agian 循环并显示重复数据

在这里，我附上了一张图片，它应该如何在 UI 上显示

我在让我的 react-grid-layout 在加载时从本地存储读取时遇到问题。我想保存它并使用特定于每个不同用户的用户名键访问布局。我可以将布局保存到本地存储中，并且这样做没有问题，并且可以看到当我更改布局时它们正在发生变化。当我重新加载页面时，但布局尚未保存，本地存储将清除，当我尝试添加新项目时，我收到一个错误，告诉我无法将新项目推送到我的对象数组（布局）。当我再次刷新页面时，此错误消失。我在下面的代码中显示了完整的错误。我希望能够尽可能地添加/删除我的布局，并且当该布局发生更改时，我想将其保存到本地存储中，以便在刷新页面或用户单击页面时，

编辑：

添加项目时显示的错误代码：

我正在设计一个仪表板 UI，用户可以在其中使用 react-grid-layout 创建具有不同可视化效果的自定义仪表板。我有它，所以当用户更改布局时，它会保存到本地存储中。当页面被刷新时，布局被返回。这目前正在工作，除了高度。当用户刷新页面时，网格项目的宽度和位置会恢复，但是它们都以行高 1 呈现，直到项目被移动，然后所有高度都恢复为它们存储的值。我可以看到高度的本地存储值都是正确的，所以我不确定为什么刷新时高度不正确。

这是我正在使用的代码：