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

Question

我正在使用Material UI中的Badge组件,但即使它是空的也会显示.有点傻,他们不会开箱即用.为什么有人想要一个空徽章？总之,我有它的有线到我的API从数据读取,但正如我所说,我想整个标志(图标和气泡)到display=none时name.warningsCount == 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>
)}

无需隐藏不应该首先渲染的元素.

Answer 2

如果该值为零，则最新的 Material UI 版本默认情况下不会显示徽章。这是因为showZero默认为 的新属性false。然后以前的版本包括invisible您可以放置​​类似内容的属性invisible={name.WargningsCount === 0}