Javascript 有条件地对组件应用颜色

我试图根据4个条件有条件地将颜色应用于div。我通常在className prop中使用三元运算符，但有4个条件，必须有更好的方法来实现这一点

比如说,

<div className={`${styles.card} ${items.length > 1 && styles.blue} ${items.length > 2 && styles.green}` etc...}>data</div>

1&&styles.blue}${items.length>2&&styles.green}`etc..}>数据

---

我也不能使用任何其他库它只能使用react

你可以有条件地用类构建一个数组：

const Card = () => {
  const classNames = [styles.card];
  if (items.length === 1) {
    classNames.push(styles.blue);
  } else if (items.length > 1) {
    classNames.push(styles.green);
  }

  return (
    <div className={classNames.join(' ')}>data</div>
  )
};

const Card=（）=>{
const classNames=[styles.card]；
如果（items.length==1）{
classNames.push（style.blue）；
}否则如果（items.length>1）{
classNames.push（styles.green）；
}
返回(
数据
)
};

---

编辑：修改条件使其更有意义。

您还可以为项目添加

类名。使用它是很常见的

<div
  className={
    classNames('styles.card', {
      styles.blue: items.length > 1,
      styles.green: items.length > 2,
    })
  }
>data</div>

1，
style.green:items.length>2，
})
}
>资料
我会使用
classcat
包。对我来说，最好的方法是根据不同的条件组合多个类名

import cc from "classcat";

<div
     className={cc([
       {
         [styles.card]: true,
         [styles.blue]: items.length > 1,
         [styles.green]: items.length > 2,
       },
     ])}
>
   data
</div>

从“classcat”导入cc；
1.
[样式.绿色]：items.length>2，
},
])}
>
数据
可能是一种返回样式的方法

const Card = () => {
   const handleStyles = () => {
      const classNames = [styles.card];
      if (items.length === 1) {
        classNames.push(styles.blue);
      }
      else if (items.length > 1) {
        classNames.push(styles.green);
      }

      return classNames.join('');
   }


  return (
    <div className={handleStyles}>data</div>
  )
};

const Card=（）=>{
常量handleStyles=（）=>{
const classNames=[styles.card]；
如果（items.length==1）{
classNames.push（style.blue）；
}
否则如果（items.length>1）{
classNames.push（styles.green）；
}
返回类名。join（“”）；
}
返回(
数据
)
};
我喜欢这种方式。如果组件被重新渲染，会有任何缺点吗。就像卡片组件有一个items prop，如果它改变了，if语句将重新计算，正确吗？@ousmane784它将重新计算，
className
将是最新的。如果你担心性能：这是可以忽略不计的。看起来情况与OP问题中的情况不同。如果有3个项目，它应该有所有三个类，而不仅仅是
卡
和
绿色
。我想暂时避免使用第三方库我想暂时避免使用第三方库