如何将多个类添加到ReactJS组件

Damjan Pavli.. 342

我使用ES6 模板文字.例如:

const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`

然后只需渲染它:

单线版:

另外:`` (138认同)

这是最好的答案！ (4认同)

这应该是最好的答案 (4认同)

Jack.. 184

我使用类名.例如:

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (
{data.name}
);
...

你不得不引入一个类名库只是为了给一个元素添加两个类,这太糟糕了:( (136认同)

@esilva你[当然可以](http://stackoverflow.com/a/32230842/24998) (5认同)

@ user959690值得注意的是,它现在[使用Webpack时由NPM安装](https://github.com/JedWatson/classnames/issues/111),所以`从'classnames'中导入classNames然后在组件中使用`className = {classNames(classes.myFirstClass,classes.mySecondClass)}`. (5认同)

@ user959690这是一个例子.当你正在做这些事情时,这个库是非常好的,你需要应用或不需要类时有复杂的逻辑.如果您正在做一些简单的事情,那么确保只使用模板,但每个案例都不同,读者应该选择适合自己工作的工具. (4认同)

无需使用外部库，请参阅下面的答案。 (4认同)

0xcaff.. 140

只需使用JavaScript.

如果要在对象中添加基于键和值的类,可以使用以下命令:

function classNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}

const classes = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};

const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"

甚至更简单:

const isEnabled = true;
const isChecked = false;

 !!e)
  .join(' ')
} />
// Output:
// 

好主意使用`className = {[listOfClasses] .join('')}`它正在为我工​​作谢谢! (5认同)

Jamie Hutber.. 86

CONCAT

不需要花哨我正在使用CSS模块,这很容易

import style from '/css/style.css';

这将导致:

换句话说,两种风格

条件语句

使用if的相同想法会很容易

const class1 = doIHaveSomething ? style.style1 : 'backupClass';

Cody Moniz.. 37

这可以通过ES6模板文字来实现:

nightlyop.. 29

您可以创建一个具有多个类名的元素,如下所示:

foo

当然,您可以使用包含类名的字符串并操作此字符串来更新元素的类名.

var myClassNammes = 'class1 class2 class3';
...
foo

Hristo Eftim.. 18

这是你用ES6做到这一点的方法:

className = {`
      text-right
      ${itemId === activeItemId ? 'active' : ''}
      ${anotherProperty === true ? 'class1' : 'class2'}
`}

您可以列出多个类和条件,也可以包含静态类.没有必要添加额外的库.

祝好运 ;)

我使用ES6 模板文字.例如:

const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`

然后只需渲染它:

单线版:

我使用类名.例如:

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (
{data.name}
);
...

只需使用JavaScript.

如果要在对象中添加基于键和值的类,可以使用以下命令:

function classNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}

const classes = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};

const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"

甚至更简单:

const isEnabled = true;
const isChecked = false;

 !!e)
  .join(' ')
} />
// Output:
// 

CONCAT

不需要花哨我正在使用CSS模块,这很容易

import style from '/css/style.css';

这将导致:

换句话说,两种风格

条件语句

使用if的相同想法会很容易

const class1 = doIHaveSomething ? style.style1 : 'backupClass';

这可以通过ES6模板文字来实现:

您可以创建一个具有多个类名的元素,如下所示:

foo

当然,您可以使用包含类名的字符串并操作此字符串来更新元素的类名.

var myClassNammes = 'class1 class2 class3';
...
foo

这是你用ES6做到这一点的方法:

className = {`
      text-right
      ${itemId === activeItemId ? 'active' : ''}
      ${anotherProperty === true ? 'class1' : 'class2'}
`}

您可以列出多个类和条件,也可以包含静态类.没有必要添加额外的库.

祝好运 ;)

香草JS

不需要外部库 - 只需使用ES6 模板字符串:

var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'

className={[
    'read-more-box',
    this.props.className,
    this.state.isExpanded ? 'open' : 'close',
].filter(x => !!x).join(' ')}

Stacy
 
or 
Stacy