如何向ReactJS组件添加多个类

本文翻译自：How to add multiple classes to a ReactJS Component

I am new to ReactJS and JSX and I am having a little problem with the code below. 我是ReactJS和JSX的新手，下面的代码有一些问题。

I am trying to add multiple classes to the className attribute on each li : 我正在尝试向每个li的className属性添加多个类：

<li key={index} className={activeClass, data.class, "main-class"}></li>

My React component is: 我的React组件是：

var AccountMainMenu = React.createClass({
  getInitialState: function() {
    return { focused: 0 };
  },

  clicked: function(index) {
    this.setState({ focused: index });
  },

  render: function() {
    var self = this;
    var accountMenuData = [
      {
        name: "My Account",
        icon: "icon-account"
      },
      {
        name: "Messages",
        icon: "icon-message"
      },
      {
        name: "Settings",
        icon: "icon-settings"
      }
    /*{
        name:"Help &amp; Support &nbsp; <span class='font-awesome icon-support'></span>(888) 664.6261",
        listClass:"no-mobile last help-support last"
      }*/
    ];

    return (
      <div className="acc-header-wrapper clearfix">
        <ul className="acc-btns-container">
          {accountMenuData.map(function(data, index) {
            var activeClass = "";

            if (self.state.focused == index) {
              activeClass = "active";
            }

            return (
              <li
                key={index}
                className={activeClass}
                onClick={self.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
});

ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));

---

#1楼

参考：https://stackoom.com/question/2kQHb/如何向ReactJS组件添加多个类

---

#2楼

I use classnames when there is a fair amount of logic required for deciding the classes to (not) use. 当确定（不）使用的类需要大量逻辑时，我使用类名 。 An overly simple example : 过于简单的示例 ：

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

    return (<li className={liClasses}>{data.name}</li>);
...

That said, if you don't want to include a dependency then there are better answers below. 就是说，如果您不想包含依赖项，那么下面会有更好的答案。

---

#3楼

Maybe classnames can help you. 也许类名可以帮助您。

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

---

#4楼

You can create an element with multiple class names like this: 您可以使用多个类名创建一个元素，如下所示：

<li className="class1 class2 class3">foo</li>

Naturally, you can use a string containing the class names and manipulate this string to update the class names of the element. 自然，您可以使用包含类名的字符串，并操纵该字符串来更新元素的类名。

var myClassNammes = 'class1 class2 class3';
...
<li className={myClassNames}>foo</li>

---

#5楼

I use ES6 template literals . 我使用ES6 模板文字 。 For example: 例如：

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

And then just render it: 然后渲染它：

<input className={classes} />

One-liner version: 一线版：

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />

---

#6楼

I use rc-classnames package. 我使用rc-classnames包。

// ES6
import c from 'rc-classnames';

// CommonJS
var c = require('rc-classnames');

<button className={c('button', {
  'button--disabled': isDisabled,
  'button--no-radius': !hasRadius
})} />

You can add classes in any format (Array, Object, Argument). 您可以添加任何格式的类（数组，对象，参数）。 All truthy values from arrays or Arguments plus keys in objects that equal to true get merged together. 来自数组或参数的所有真实值加上对象中等于true键会合并在一起。

for example: 例如：

ReactClassNames('a', 'b', 'c') // => "a b c"
ReactClassNames({ 'a': true, 'b': false, c: 'true' }) // => "a c"
ReactClassNames(undefined, null, 'a', 0, 'b') // => "a b"