javascript - React 有条件地向组件应用颜色

Question

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

例如 ，

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

我不能使用任何其他库，要么它必须使用 react

标签： javascriptreactjs

Answer 1

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

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>
  )
};

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