Javascript 如何限制DetailsList中的最大项目行数？

我如何告诉a只显示X行和一个用于访问其余行的滚动条？我肯定我错过了一些很明显的东西

我可以将

样式

传递给

根目录

，但这会导致出现垂直和水平滚动条，我确信这不是使用UI结构的正确方法

下面是一个简单的示例，展示了如何使用该方法：

const{useState}=React；
const{DetailsList}=Fabric；
常数项=[
“阿尔法”，“布拉沃”，“查理”，“德尔塔”，“回声”，
“狐步舞”、“高尔夫”、“酒店”、“靛蓝”、“朱丽叶”，
“利马”、“迈克”、“十一月”、“奥斯卡”、“爸爸”，
“罗密欧”、“塞拉”、“探戈”、“制服”、“维克多”，
“威士忌”，“x光”，“扬基”，“祖鲁”
].map（name=>（{name，key:name}））；
常量列=[
{
姓名：“姓名”，
字段名：“名称”
}
];
常量应用=（）=>{
返回(
);
};
render（，document.getElementById（“根”））

指出，这些示例的垂直尺寸有限。他们通过将整个示例放在带有以下CSS的容器中来实现：

.example-170 {
    max-height: 80vh;
    padding-top: 20px;
    padding-right: 4px;
    padding-bottom: 20px;
    padding-left: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

…反过来，这是在一个有限大小的容器中

这也适用于我的示例案例。所以，也许他们真的把这留给了CSS，我找不到任何属性以更“UI结构”的方式来完成


const{useState}=React；
const{DetailsList}=Fabric；
常数项=[
“阿尔法”，“布拉沃”，“查理”，“德尔塔”，“回声”，
“狐步舞”、“高尔夫”、“酒店”、“靛蓝”、“朱丽叶”，
“利马”、“迈克”、“十一月”、“奥斯卡”、“爸爸”，
“罗密欧”、“塞拉”、“探戈”、“制服”、“维克多”，
“威士忌”，“x光”，“扬基”，“祖鲁”
].map（name=>（{name，key:name}））；
常量列=[
{
姓名：“姓名”，
字段名：“名称”
}
];
常量应用=（）=>{
返回(
);
};
render（，document.getElementById（“根”））
.container{
最大高度：50vh；
溢出-x：自动；
溢出y：自动；
填充顶部：20px；
右侧填充：4px；
垫底：20px；
左侧填充：4px；
位置：相对位置；
}

努力确保我遵循问题/目标。您是否在寻找这样的内容：我只想显示10行，其余的行溢出？（10可以是任何数字）从文档中，DetailsList是List组件的派生。看看他们在列表上应用了css maxHeight。CSS可能是实现这一点的唯一方法。事实上。。看看这些道具，你似乎可以使用
renderCount
@JohnRuddell-谢谢！很抱歉延迟回复，我意外地被叫走了。我应该提到我试过了
renderCount
；它的工作原理是，它只显示X个项目，但不显示有更多项目的任何指示（滚动条等）。@JohnRuddell-：-）使用
renderCount
它从不呈现列表的其余部分。我还必须管理
startIndex
。我对滚动条很满意，只是UI Fabric在道具方面做得太多了，我本来希望用CSS来完成的，我想知道我是否错过了什么。不过我想也许不是。（在发布CSS解决方案之前，我还要等一会儿。）谢谢你的帮助！