isomorphic-style-loader - Как добавить «активный» класс

Question

Я использую Reaction-Starter-Kit и создаю компонент списка, который выглядит следующим образом:

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './CommandList.css';

const CommandList = () => {
  return (
    <ul className={s.commandList}>
      {data.commands.map((command, index) => (
        <li 
          key={index}
          className={s.commandListItem}>
          {command.command}
        </li>
      ))} 
    </ul>
  );
};

export default withStyles(s)(CommandList);

Я пытаюсь добавить «активный» класс к своему li предмету, но не знаю, как это сделать? Я пытался использовать библиотеку classnames, но не знал, как получить второй класс из моих стилей. Когда я просто передаю строку «active», стили не импортируются.

import cx from 'classnames';

<li className={cx(s.commandListItem, {'active': command.active })}>

У меня вопрос, как бы я сделал что-то вроде:

<li className={cx(s.commandListItem, {s.active: command.active })}>

Answer 1

<li className={cx(s.commandListItem, {[s.active]: command.active })}>
см [] нотация ключа объекта

Answer 2

className в React is String, и вы должны преобразовать весь объект в String

Сначала создайте массив классов, которые вы хотите присвоить классу

Затем преобразовать массив имени класса в String

className={[s.commandListItem, 'active'].join('')}

Answer 3

Разобрался. Я использовал classnames неправильно. Мне нужно было импортировать classnames/bind.

import s from './CommandList.css';
import classnames from 'classnames/bind';

let cx = classnames.bind(s);

Затем я могу просто передать 'активную' строку, как я хотел:

<li className={cx(s.commandListItem, {'active': command.active })}>

Имя cx теперь имеет больше смысла ?