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

Question

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

Answer 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

Answer 2

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

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

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

setDynamicHeight(*calculate your desired height here*)

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

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