DetailsList - 为空时显示一条消息答案

【问题标题】：DetailsList - Display a message when emptyDetailsList - 为空时显示一条消息
【发布时间】：2021-12-19 00:57:19
【问题描述】：

你们知道当 FluentUI DetailsList 为空时显示“未找到任何项目”或类似消息的优雅方式吗？

目前 DetailsList 已呈现，但没有任何行。

干杯

【问题讨论】：

【解决方案1】：

您可以使用条件渲染。例如，如果 items 是行数组，您可以检查数组中是否有任何行，如果没有则呈现消息。在这种情况下，它只是段落元素，但您可以制作自己的消息组件，根据需要设置样式，然后进行渲染。

const items = [];

{ items.length > 0 ? (
      <DetailsList
        items={items}
        compact={isCompactMode}
        columns={columns}
        selectionMode={SelectionMode.none}
        getKey={this._getKey}
        setKey="none"
        layoutMode={DetailsListLayoutMode.justified}
        isHeaderVisible={true}
        onItemInvoked={this._onItemInvoked}
      />
    ) : 
    (
        <p>There are no items in the list.</p>
    )
}

【讨论】：

是的，这就是我现在正在做的事情，我想知道是否有内置选项。
@EmilioPetrangeli 没有内置解决方案。目前这是正确的做法。