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

Question

I am trying to apply a color to a div conditionally based on 4 conditions. I usually use the ternary operator in the className prop but there is 4 conditions and there has got to be a better way to do this.

For example,

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

I cant use any other libraries either its just got to be using react

Answer 1

You could build an array up with classes conditionally:

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

Edit: Modified conditions to make more sense.

Answer 2

I would use classcat package. For me is the best approach to combine multiple class names based on different conditions.

import cc from "classcat";

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

Answer 3

Maybe a method that return the styles

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

Answer 4

You can also add classnames package for your project. It's very common to use it.

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