isomorphic-style-loader

Question

我正在使用 react-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);

我正在尝试将 "active" class 添加到我的 li 项目，但不确定如何添加？我尝试使用 classnames 库，但不确定如何从我的样式中获取第二个 class。当我只传入字符串 "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);

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

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

cx var 名称现在更有意义

Answer 2

<li className={cx(s.commandListItem, {[s.active]: command.active })}>
请参阅 [] 对象键表示法

Answer 3

className 在 React 中是字符串，你必须将所有对象转换为字符串

首先创建一个 classes 数组，你想分配给 class

然后将 class 名称的数组转换为字符串

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

isomorphic-style-loader - 如何添加 "active" class

isomorphic-style-loader - How to add an "active" class

reactjs

react-starter-kit