Ag-grid，在单元格渲染器中获取网格 dom 元素的方法

【问题标题】：Ag-grid, Way to get grid dom element inside cell rendererAg-grid，在单元格渲染器中获取网格 dom 元素的方法
【发布时间】：2021-03-13 01:10:52
【问题描述】：

我想在单元格渲染器中获取 Grid dom 元素。有可能吗？

这是因为我必须通过 createPortal 方法将我的组件附加到 Grid DOM。

但我不知道如何在自定义单元格渲染器中获取网格元素。我猜它可以在 ICellRendererParams 中找到，但我找不到。

【问题讨论】：

您能否详细说明您要做什么？您想将组件附加到单元格本身还是附加到主体但位于单元格旁边？
@rateLess 我只想将我的组件附加到网格而不是正文。这是因为我希望我的绝对组件在页面被缩放时始终附加到网格。
但是您的用例是什么？当您单击单元格中的按钮时，您是否尝试在网格内打开菜单之类的操作？
@rateLess 类似的东西。这是一种当用户单击单元格内的图像时打开的弹出窗口。实际上我只想在单元格内打开弹出窗口，但它被网格元素隐藏。所以我决定将我的弹出窗口附加到网格上。如果有办法在单元格内显示我的弹出窗口。这是对我最好的方式

【解决方案1】：

我已经发布了一个演示 here。它使用 ReactDOM 的 createPortal 在单击按钮时在 document.body 上附加或删除 <div>。它的位置是absolute，以便使用top 和left 属性，这样我就可以将div 定位在按钮旁边。

我已经将popupRef 放在那里以在渲染时计算其宽度，这样我就可以将弹出窗口更多地偏移到左侧。否则，由于角重叠，它将完全覆盖按钮。 setWidth(0) 明白我的意思。

您可以使用像 Popper 这样的库，如果它可以让您更轻松地定位弹出窗口。

【讨论】：