聊天通知指示器答案

【问题标题】：A chat notification Indicator聊天通知指示器
【发布时间】：2021-09-03 07:14:21
【问题描述】：

大家看屏幕截图。我正在构建一个聊天窗口来显示未读消息。虽然它工作正常。 code window

当计数为 0 时，我想不出一个简单的条件，我想隐藏整个徽章。

 <Badge
                                  badgeContent={jobcard.jobcard_count.map(
                                    (row2) => {
                                      if (row2.jobcard_id === row._id)
                                        return row2.count;
                                    }
                                  )}
                                  color="primary"
                                >
                                  <MailIcon />
                                </Badge>

【问题讨论】：

好吧，我不确定我是否理解正确，但是如果您的 badgeContent 是未阅读通知的数量，也许您可以这样说：return row2.count===0？空：row2.count，
试过但没有成功？

标签： reactjs react-redux badge

【解决方案1】：

尝试使用短路评估进行条件渲染，而不是在 badgeContent 中执行 row2.count 逻辑，将其移出 Badge 组件并仅在 row2.count 大于 0 时返回 Badge 组件。

{
    jobcard.jobcard_count.map(
      (row2) => {
        if (row2.jobcard_id === row._id)
          row2.count > 0 && <Badge badgeContent={row2.count} color="primary"><MailIcon /></Badge>;
      }
  )
}

【讨论】：

row2.count 之前如何计算？它在 map() 中的参数？尚未经过测试，因为我认为它不起作用
嘿，是的，你是对的，我假设 row2 在外部范围内可用。您能否分享您使用“行”作为循环变量的整个代码？
我可以知道你的邮件ID或类似的东西来共享代码吗？代码有点长，所以不允许粘贴
您可以使用 pastebin 之类的粘贴服务，然后在此处发布链接。
@SabyasachiRout 我在检查您的代码后编辑了答案。主要的变化是，不是在 badgeContent 中执行 row2.count 逻辑，而是将其移出 Badge 组件并仅在 row2.count 大于 0 时返回一个 Badge 组件。

【解决方案2】：

如果计数为 0，您可以使用 if 语句隐藏整个徽章。在 else-part 你应该放 MailIcon。

或者，如果计数为 0，您可以添加一个类，这会使用 CSS 隐藏徽章。

【讨论】：