同构式加载器-如何添加“活动”类

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

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

参见[]对象键表示法

Answer 2

弄明白了。我用错了classnames。我需要导入classnames/bind。

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

let cx = classnames.bind(s);

然后，我可以像我想要的那样传入'active‘字符串：

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

现在，cx var名称更有意义了。

Answer 3

React中的className是String，您必须将所有对象转换为String。

首先，创建要分配给类的类数组。

然后将类名数组转换为字符串。

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