我的情况略有不同。我的页面上有多个小部件，每个小部件都有一个缩小的 js 文件，它将呈现内容（HTML）。

我有来自服务器的小部件列表，所有 js 文件都将在页面加载时呈现。

我的问题是如何为我的小部件找到占位符？我已经缩小了 Js 文件，但是我如何将道具传递到该文件中，以便 js 文件知道内容需要呈现的位置。

我可以修改缩小的 js 文件，但不能包含在我的包中。它应该是分开的。

js文件按需渲染，组件也按需渲染，但它们之间没有关系，虽然js文件理解组件并渲染其中的内容。

这是我的代码的简化示例

在这里，我有相同组件的实例。当我单击一个时 - 我希望删除具有此特定实例的 div。要检查 - 这是我的 ComponentA 代码：

因此，每个实例都有其唯一的 uid 状态。当我单击其中一个组件时 - 总是最后一个被删除。

更新

那是简化版，现在可以使用了。我真正的问题是 react-grid-layout：

有没有办法从 react-grid-layout 中删除 compactType 属性？因为它会导致网格项目的位置无法正确保存，因为它似乎以垂直或水平顺序呈现数据库中的位置。

任何人都知道如何在 DevExtreme React Grid 中更改 TableHeaderRow 的 fontSize？

这是我一直在使用的网站（ https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/data-editing/ ）的代码示例

标记列（例如产品、区域、金额）的文本的字体大小是固定的，我看不到可以更改它的参数。有任何想法吗？

这是我用来生成 react-grid-layout 的代码。

我在这里想要实现的是一个动态仪表板，它是可配置的，也可以调整大小和拖动。

在初始渲染时，我试图让仪表板卡显示在一行中，因为所有四个仪表板卡的 Y 坐标都相同。请参考图片。

如您所见，所有四张卡片的初始 x 坐标不同，y 坐标为 0。因此，它们不是连续显示，而是如下所示： 初始渲染图像

拖放和调整大小工作得很好。

请帮助我了解我做错了什么或如何通过 React-grid-layout 解决我的卡片的初始随机放置。

我尝试使用带有 react-grid-layout 的自定义组件。但是，我无法让它工作。当我将组件放在 div 中时，我可以调整该 div 的大小，但组件本身不会随之调整大小。当我将组件直接放在网格标签内时，我根本无法调整大小或移动它，并且网格的边框也不匹配组件的边框。

这是我的 index.js 的代码：

我已经在代码沙箱上上传了完整的示例，包括 TestComponent： https ://codesandbox.io/s/7zl7mm90m0

如何在网格上正确实现自定义组件？

此致，

W。

我想要一个网格，它总是有例如 3 行和 3 列。现在假设这些是我的网格项目

假设所有项目都具有相同的宽度和高度并且不可调整大小。

如果我将 9 拖到 6 也就是垂直方向，这些项目只会交换它们的位置。但是，如果我将 9 水平拖到 8 上，则 8 项将向下移动到新行，并且 9 将代替 8，而之前的 9 位置将为空。是否可以让项目在水平拖动期间也只是交换位置，而不是创建一个新行？

我是 React 初学者，正在尝试使用卡片组件构建仪表板。我有一个渲染卡片元素的 React 组件，并且对于每张卡片，对于mouseenter和具有相同的处理程序事件mouseleave。:hover当鼠标悬停在一个小部件上时，预期的行为是查看样式。但是，我似乎所有的小部件都具有这种:hover风格。如何更改代码，以便只有一个鼠标悬停显示悬停状态，而不是全部？

当我尝试在我的开发环境中运行网站时收到以下错误消息：

未捕获的错误：ReactGridLayout：ReactGridLayout.children[0].y 必须是数字！

在 validateLayout (app.js:6171)

在 app.js:6132

在 forEachSingleChild (app.js:62734)

在 traverseAllChildrenImpl (app.js:62638)

在 traverseAllChildrenImpl (app.js:62654)

在 traverseAllChildren (app.js:62709)

在 Object.forEachChildren [as forEach] (app.js:62754)

在 synchronizeLayoutWithChildren (app.js:6117)

在 ReactGridLayout._initialiseProps (app.js:40638)

在新的 ReactGridLayout (app.js:40089)

还有一个错误告诉我：

app.js:77841 组件出现上述错误：

在 ReactGridLayout（由 ResponsiveReactGridLayout 创建）

在 ResponsiveReactGridLayout（由 WidthProvider 创建）

在 WidthProvider 中（由 Grid 创建）

在 div 中（由 Grid 创建）

在网格中（由测试创建）

在测试中

这是我的 Test.js 文件：

这是我的 Grid.jsx 文件：

我不记得我更改了代码中的任何内容，也找不到与 Google 上的错误消息相关的任何内容。谁能告诉我更多关于它或向我解释的信息？所以我可以寻找解决方案。

我遇到了库 react-grid-layout 的问题，我不知道这是一个错误还是我做的不好。我在这里打开了一个问题，但我想得越多，这么大的问题被忽视的可能性就越小。你可以在这里找到我正在经历的演示

我正在尝试做的事情

我想使用 react-grid-layout 创建一个仪表板。我正在尝试实现 容器模式，因此我有一个 DashboardContainer 组件通过他的状态控制布局并将此布局传递给道具中的 Dashboard 组件。

我遇到的问题

元素在初始状态下被正确放置，但是当我添加项目时，添加元素的 x、y、w 和 h 不正确。第一次添加应该是 (5,0,2,2)，它最终被放置在 (0,4,1,1) 上没有正确的钥匙，但我认为我的钥匙是正确的。

示例：此布局传递给 Dashboard 布局数据

但这是显示布局（元素“new0”不对应） 显示布局

我的代码

这是我的 DashboardContainer 组件的（简化）代码

这里是仪表板组件：

完整（几乎）工作代码可以在这个代码框中找到

我对 React 和 RGL 还是很陌生，所以欢迎提出任何建议！

谢谢