在 JSX 中的条件后显示图像

Question

一旦用户单击鸡类别，我试图显示图像，我只能更改颜色。

   {categories && categories.map(category => (
        <motion.div 
        whileTap={{scale:0.75}}
        key={categories.id} className={`group ${
          filter === category.urlParamName}group ${ filter === "chicken"? 
          'bg-red-500': 'bg-card'} } 
          w-24 min-w-[94px] h-28 cursor-pointer rounded-lg drop-shadow-xl flex flex-col 
        gap-3 items-center justify-center hover:bg-cartNumBg`}
        onClick={()=> setFilter(category.urlParamName)      
        } >

Answer 1

您将在 w-24 之前关闭类名的右括号。

<motion.div
      whileTap={{ scale: 0.75 }}
      key={categories.id}
      className={`group ${filter === category.urlParamName}group ${
        filter === "chicken" ? "bg-red-500" : "bg-card"
      } w-24 min-w-[94px] h-28 cursor-pointer rounded-lg drop-shadow-xl flex 
      flex-col gap-3 items-center justify-center hover:bg-cartNumBg`}
      onClick={() => setFilter(category.urlParamName)}
    />