改变徽章的颜色 - 条件

Question

我是 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>

Answer 1

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

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

改变徽章的颜色 - 条件

change color of the badge - condition

javascript

badge

reactjs