问题标签 [react-grid-layout]

我是 react 新手，我想尝试使用 react-grid-layout。

我想了解是否可以在项目上显示布局的“x”值，以便我可以看到 x 坐标随着鼠标的移动而变化。显然，每个项目都必须有自己的“x”坐标值……但我就是不知道该怎么做。我确信有一个简单的方法，但我看不到它。

这是我的代码

https://codesandbox.io/s/react-grid-layout-componet-isy1w?file=/src/App.js

这里的功能：el.x 它不会随着布局的变化而更新

}

非常感谢您

再会。

我正在研究 React 中的添加和删除功能，用户可以在其中从页面添加和删除卡片。用户还必须选择要在卡片中显示的两个图表之一。

这是它目前的工作方式：当页面加载时，会呈现一张带有下拉菜单的卡片。然后用户从下拉列表中选择一个图表，它会出现在卡片中。 页面当前的工作方式

然后，用户可以使用上图中显示的按钮选择删除卡或添加另一张卡。问题是，当添加另一张卡片时，会呈现与第一个选择相同的图表，如图所示。

我想要完成的是 - 添加新卡片时，显示带有下拉列表的原始卡片，以便用户每次添加另一张卡片时都可以选择一个新图表，如下所示。

进一步解释一下：稍后，将有更多图表选项，用户将能够创建一个包含他们想要查看的图表的页面。所以每次他们点击添加图表时，他们都会得到一张卡片，让他们可以选择他们想要在该卡片中呈现的图表。

这是我的沙箱的链接，您可以在其中找到所有代码。

根据React-Grid-Layout 文档

resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>)

可用于实现网格项目的自定义调整大小句柄。

就我而言，这不起作用。它甚至没有抛出任何错误。

代码： https ://codesandbox.io/s/react-playground-forked-jwfn3?file=/index.js

注意：如果我删除resizeHandle={<BottomRightHandle />}网格项目将获得默认的调整大小处理程序，它工作正常。

CustomResizeHandle.js

index.js

我正在使用react-grid-layout 它drag and drop and resizing在我的网站中启用。所以拖放我能够实现并将我的布局存储到本地存储也完成了。

我正在使用本地存储来保存我的布局，以便使用此示例获得更好的用户体验

事情是我想做的是有条件地给盒子高度和宽度，比如empName==="steve"宽度应该是5，否则它应该是3

所以我所做的是

上述方法不能按要求工作。

这是完整的工作代码

编辑更新

我更改了我的数据，因为它是错误的，我正在循环 p[0]

现在我所做的是我为选项卡创建了一个数据，它将显示菜单，即

我拥有的另一个是compData，它将具有emp状态

像下面

重要——实际上在我的真实场景中，我一次获得所有选项卡，而不是单击一个选项卡获取该选项卡的 id 并从后端获取该 id 的 compData 但在这里我不能这样做，所以我放入 data1 两个对象一个用于第一家公司和其他公司。

我认为这是在这里写解释的方式

更新代码沙箱请检查

我希望你的一天一切顺利。我是 Material UI 的新用户，我正在构建我的第一个个人资料页面（下图）。

随着我越来越接近构建此页面，我正在努力创建一个网格系统，该系统允许 about 部分直接位于三个面板下方（见下图）。

如何删除 about 部分和三个面板之间的填充（下面的代码）？

我将 react-grid-layout 添加到我的 react-hooks 项目中，下面是我的代码：

我的 onDrop 事件不起作用。我无法调整 div 的大小。拖放 div 后，我无法获得 div 的位置和大小。我很困惑。请帮我。

我已经和这个斗争了太久了。如果取决于我的侧边栏是否隐藏，我需要能够更改网格的宽度。我只需要知道如何提供像素信息来更改大小。

这是我的代码：

不管我看过什么，我都不明白如何让它工作。谢谢你。

我正在尝试为我正在开发的网站实施拖放操作。它的用途是构建自定义表单。我们有字段和一切，我只需要专注于拖放字段。我找到了这个库。但是，我尝试使用响应式网格布局来实现它，并让它在给定的高度下工作。所以我的字段列表如下所示：

然后，我像这样映射列表：

FieldWrapper 是我们制作的一个组件。我将它包裹在一个 div 周围以从 React-Grid-Layout 获取 data-grid 属性。“onDimensionChange”是一个使用自定义钩子获取内容宽度和高度的函数，因此我目前能够提取内容的高度。我的问题是把那个高度放在 RGL 中。

我希望能够获得 FieldWrapper 内容的高度并使用某些东西将新高度分配给布局“h”属性。

问题是当我尝试这样做时，React-Grid-Layout 不会重新渲染.. 知道吗？

我想使用 React Grid Layout 在 React 中实现可拖动组件。当我直接在里面创建网格子时效果很好

在职的

但是，当我尝试使用 React 组件创建网格子项时，一切正常，除了组件不再可拖动。

不工作

节点组件类

有谁知道如何在中创建 React 组件作为网格子项？

我正在使用 ReactGridLayout，其中调整大小只能通过单击该项目并选择三个预定义的大小（参见屏幕截图）。我将当前项目和布局保持在反应组件的状态。尽管在添加或删除项目后会更新反应组件，但除非我刷新页面，否则不会显示对布局的更新（不是通过拖动）。

如何在以编程方式更改布局后更新网格（通过用户操作（例如，宽尺寸）参见屏幕截图。

有什么建议么？

谢谢