如何在react js中改变bootstrap类的值？

Question

我想用react js中的值查询来更改引导程序类...？

const Card = ({ item }) => {

  return (
   if (item.approval === "pending") {
   <span className="badge badge-danger">{item.approval}</span>

   } else if (item.approval === "Appropriate") {
   <span className="badge badge-warning">{item.approval}</span>

   } else if (item.approval === "approved") { 
   <span className="badge badge-success">{item.approval}</span>
   }
  )
}

export default Card

Answer 1

不能在return中使用if语句。你需要在外面使用它。

你可以像这样让它变得简单。

const Card = ({ item }) => {
  let colorClassName = "badge-danger";
  if (item.approval === "Appropriate") colorClassName = "badge-warning";
  if (item.approval === "approved") colorClassName = "badge-success";

  return (
   <span className={`badge ${colorClassName}`}>{item.approval}</span>
  )
}

export default Card