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

Question

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

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

Догадаться. Я использовал 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 имя вар теперь имеет больше смысла

Answer 2

<li className={cx(s.commandListItem, {[s.active]: command.active })}>
увидеть [] обозначение ключа объекта

Answer 3

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

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

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

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