reactjs - 根据badgeContent中的内容操纵Material UI/React Badge组件的可见性

Question

我正在使用 Material UI 中的 Badge 组件，但即使它是空的，它也会显示。他们不会立即构建该功能，这有点愚蠢。为什么有人想要一个空徽章？无论如何，我将其连接到我的 API 来读取数据，但正如我所说，我希望在 name.warningsCount 时将整个徽章(图标和气泡)显示为 display=none == 0 和 name.problemsCount = 0。我很难完成这件事。

这是该代码的片段:

<Badge
    className="warning-badge"
    badgeContent={name.warningsCount > 0 && name.warningsCount}>
    <AlertWarning />
</Badge>
<Badge
    className="problems-badge"
    badgeContent={name.problemsCount > 0 && name.problemsCount}>
    <AlertWarning />
</Badge>

提前致谢!

Answer 1

您也可以在 name.warningsCount 不为空时渲染徽章:

{name.warningsCount > 0 && (
    <Badge
        className="warning-badge"
        badgeContent={name.warningsCount}
    >
        <AlertWarning />
    </Badge>
)}

无需隐藏本来就不应该呈现的元素。