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

时间:2017-07-12 20:00:52

标签: reactjs material-ui

我正在使用Material UI中的Badge组件,但即使它是空的,它也会显示。有点傻,他们不会开箱即用。为什么有人想要一个空徽章?无论如何,我已将它连接到我的API以读取数据,但正如我所说,我希望在display=nonename.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>

提前致谢!

2 个答案:

答案 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}

的内容。