React开发：根据已报名学生人数条件动态修改Badge徽章颜色

实现代码 #

你可以通过动态判断Badge组件的bg属性值实现需求，优先按你给出的规则设置判断优先级即可，修改后的代码如下：

// 单独封装背景色判断逻辑，后续修改规则更易维护
const getBadgeBg = (item) => {
  // 容量为1时固定显示绿色
  if (item.capacity === 1) return 'success'
  // 仅剩1个报名名额时显示红色
  if (item.registeredCount === item.capacity - 1) return 'danger'
  // 报名人数未达半满时显示绿色
  if (item.registeredCount / item.capacity < 0.5) return 'success'
  // 半满及以上、剩余名额大于1时显示黄色，可根据需求自行调整颜色值
  return 'warning'
}

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

可选行内写法 #

如果逻辑不需要后续扩展，也可以直接把判断写在行内：

<Col className="text-center">
   <div>
      <Badge 
          bg={
            item.capacity === 1 ? 'success'
            : item.registeredCount === item.capacity - 1 ? 'danger'
            : item.registeredCount / item.capacity < 0.5 ? 'success'
            : 'warning'
          }
      >
        {item.registeredCount} / {item.capacity}
      </Badge>
   </div>
</Col>

说明 #

• 如果你不需要半满以上的黄色状态，直接把最后一个返回值改成success即可
• 所有颜色取值都和你现有代码的Bootstrap Badge属性规范兼容，不需要额外修改样式

内容的提问来源于stack exchange，提问作者Anket.