使用 React 和 Typescript 隐藏徽章编号为 0答案

【问题标题】：Hide the badge number when it is 0 using React and Typescript使用 React 和 Typescript 隐藏徽章编号为 0
【发布时间】：2022-11-02 02:26:45
【问题描述】：

我正在开发一个徽章组件。我想在数字为 0 时隐藏 Bade。

我在codesandbox上试过这个。我使用隐形作为道具。这有一个类“不可见”。当batchContent 为0 时，我不确定如何应用此类。我尝试过，但它不起作用。不确定使用 useState 是否会有所帮助。请帮我解决一下这个。谢谢。

【问题讨论】：

一种选择是在这种情况下从组件返回null。所以像``` if (badgeContent === 0) { return null } ``` 在你的组件里面

【解决方案1】：

您可以有条件地渲染它 - 仅当 badgeContent 大于 0 时才显示它。

{Number(badgeContent) > 0 && (
   <span className={`badgeContent`}>
      {displayValue}
   </span>
)}

【讨论】：