如何将 React Suite Grid 中的行大小调整为最高单元格的高度

Question

我正在使用 React Suite 的网格 以日历格式显示大学课程数据。除了单元格高度不统一之外，网格效果很好：我的网格 UI 的图像示例

这是我目前的网格代码：

<Grid
    style={{
        width: "100%",
        height: "100%",
    }}
    data-testid="grid"
>
    {this.state.data.map((c) => (
        <Row>
            {c.map((e) => (
                <Col className="display-linebreak" style={this.formatCell(e)}>{e}</Col>
            ))}
        </Row>
    ))}
</Grid>

有没有什么方法可以使所有单元格的高度在各自的行中保持一致，同时仍然使网格足够灵活，可以接收可变数量的日期和时间的数据？我尝试执行此操作的一种方法是添加 {{ height: "100%" }} 作为行的内联样式，但我很快意识到这种方法或任何类似的方法都行不通，因为最终需要的是单元格高度以符合基于其他单元格的自动高度的动态行高。我考虑的另一件事是，如果 Column 是 Row 的父组件，而不是相反，那么相对于 Row 隔离单元格可能会更容易，但我认为这在 React Suite Grid 中是不可能的。

基本上，我的难题是，如果行中还有尚未渲染的单元格，单元格如何知道它必须有多高？如果发现更高的单元格，是否可以返回并更新渲染后的高度？单元格如何知道它位于哪一行？

非常感谢任何提示或见解，我很乐意澄清任何事情或回答相关问题。先感谢您！

Answer 1

我通过向 rs-row 添加 flex 来做到这一点：

.rs-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

然后您可以将高度 100% 添加到其中的 cols 或卡片元素。