我正在使用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>
提前致谢!
答案 0 :(得分:5)
您也可以在name.warningsCount
不为空时呈现徽章:
{name.warningsCount > 0 && (
<Badge
className="warning-badge"
badgeContent={name.warningsCount}
>
<AlertWarning />
</Badge>
)}
无需隐藏不应该首先渲染的元素。
答案 1 :(得分:0)
如果值为零,则默认情况下,最新的Material UI版本不会显示徽章。这是因为新的showZero
属性默认为false
。然后以前的版本包括invisible
属性,您可以在其中放置类似invisible={name.WargningsCount === 0}