如何设置 react-data-grid 的动态高度答案

【问题标题】：How can I set the dynamic height of react-data-grid如何设置 react-data-grid 的动态高度
【发布时间】：2019-09-04 13:13:11
【问题描述】：

我已将 react-data-grid 集成到我的一个项目中。在那里，我想根据加载的行设置网格的动态高度。我该怎么做？

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

您可以在 react-data-grid 周围创建一个包装器组件，您将在其中计算 dynamic height 并考虑您拥有的任何参数。就我而言，我考虑了rowHeight 和visibleRowCount。一旦你计算出dynamic Height，你可以使用minHeight prop 将它传递给React-data-grid。

例子：

<ReactDataGrid
minHeight={dynamicHeight}
...
/>

文档链接：https://adazzle.github.io/react-data-grid/docs/ReactDataGrid#minheight

【讨论】：

在金丝雀版本中似乎已放弃对动态高度的支持
这个数据网格让我哭了:(((

【解决方案2】：

您可以使用style 属性并将状态变量dynamicHeight 传递给它，如下所示：

let [dynamicHeight, setDynamicHeight] = useState(*default height*);

当你想改变高度时，可以调用函数：

setDynamicHeight(*calculate your desired height here*)

return(
    <DataGrid style={{height = dynamicHeight}} />
)

我通过搜索 GitHub 上的问题部分找到了这个：https://github.com/adazzle/react-data-grid/issues/2553

【讨论】：