如何在React JS中更改值来更改引导类？

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