1

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

我正在尝试为我的li项目添加一个“活动”类，但不知道如何做到这一点？我尝试使用该classnames库，但不确定如何从我的样式中获取第二类。当我只传入字符串“active”时，不会导入样式。

import cx from 'classnames';

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

我的问题是我将如何做类似的事情：

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

3 回答 3

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

var 名称现在cx更有意义

于 2018-05-01T20:39:10.793 回答
0

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

于 2018-05-01T20:42:18.123 回答
0

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

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

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

className={[s.commandListItem, 'active'].join('')}
于 2018-09-17T14:46:27.580 回答