Как использовать несколько классов в модуле css на основе константы?

Question

В настоящее время моя константа extraClassName никогда не читается, и я хотел бы, чтобы модуль css следовал тому, какое extraClassName основано на операторах if. Не знаю, как go это сделать.

render() {
    const { isFinish, isStart } = this.props;
    const extraClassName = isFinish
      ? "node-finish"
      : isStart
      ? "node-start"
      : "";

    return <div className={`node ${styles.extraClassName}`}></div>;
  }```

Answer 1

Я нашел решение своего вопроса после того, как покопался. Последний случай должен быть добавлен как styles.node, поскольку состояние не имеет значения, в то время как константа extraClassName (которая теперь должна быть переименована) должна содержать модули css классов, которые я хочу редактировать. Спасибо за все ответы и помощь, которую я получил!

  render() {
    const { isFinish, isStart } = this.props;
    const extraClassName = isFinish
      ? styles.nodeFinish
      : isStart
      ? styles.nodeStart
      : "";

    return <div className={`${extraClassName} ${styles.node}`}></div>;
  }

Answer 2

extraClassName - это просто переменная в локальной области видимости, его нет в объекте стилей.

Таким образом, вы должны иметь возможность просто написать:

return <div className={`node ${extraClassName}`}></div>;

и он должен работать.

Если вы часто выполняете рендеринг этого условного класса, есть несколько полезных npm пакетов, таких как classnames (https://www.npmjs.com/package/classnames) или clsx (https://www.npmjs.com/package/clsx), что делает написание этих условных классов немного лучше.

Пример

import clsx from 'clsx';

...

return <div className={clsx('node', {
  'node-finish': isFinish,
  'node-start': !isFinish &&isStart
})}></div>;

Если вы осторожны из npm пакетов для такой маленькой утилиты, также довольно быстро и легко написать подобную библиотеку утилит для себя.