更改徽章的颜色 - 条件答案

【问题标题】：change color of the badge - condition更改徽章的颜色 - 条件
【发布时间】：2022-01-08 07:47:38
【问题描述】：

我是 React 的初学者。我想根据注册学生的数量更改徽章的颜色。像图片上的东西。如果 item.registeredCount（注册学生人数）=（item.capacity - 1）那么颜色将为红色（例如 1/2、4/5、10/11 等），否则徽章的颜色将为绿色，因为容量未满一半。当 item.capacity = 1 时，徽章颜色为绿色。

我的代码：

<Col className="text-center">
   <div>
      <Badge 
          bg="danger">{item.registeredCount}  /  {item.capacity}
      </Badge>
   </div>
</Col>

【问题讨论】：

标签： javascript reactjs badge

【解决方案1】：

为解决您的问题，您可以使用三元运算符 (Documentation) 来选择您的徽章颜色。

<Badge bg={(item.registeredCount === item.capacity - 1) ? "green" : "danger"}>{item.registeredCount}  /  {item.capacity}
</Badge>

【讨论】：