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);

我试图添加＆＃34;有效＆＃34;类到我的li项目，但不知道该怎么做？我尝试使用classnames库，但不知道如何从我的样式中获取第二个类。当我传入字符串＆＃34; active＆＃34;时，样式不会被导入。

import cx from 'classnames';

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

我的问题是我该怎样做：

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

Answer 1

想出来。我使用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

addedfile var名称现在更有意义

Answer 2

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

Answer 3

React中的

className 是String，您必须将所有对象都转换为String

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

然后将类名称数组转换为String

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

isomorphic-style-loader - 如何添加＆＃34; active＆＃34;类

3 个答案: