如何添加多个类到一个ReactJS组件?

我是ReactJS和JSX的新手，我对下面的代码有一个小问题。

我试图在每个li上添加多个类到className属性:

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

我的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"));

当前回答

您可以使用数组，然后使用空间将它们连接起来。

<li key={index} className={[activeClass, data.class, "main-class"].join(' ')}></li>

这将导致:

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

2019-10-11 14:30:10

其他回答

姗姗来迟，但为什么要用第三方来解决这么简单的问题呢?

你可以像@Huw Davies提到的那样——最好的方法

1. <i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
2. <i className={[styles['foo-bar-baz'], 'fa fa-user', 'fa-2x'].join(' ')}

两者都很好。但对于大型应用程序来说，编写可能会变得复杂。为了使其达到最佳效果，我做了上面相同的事情，但将其放在一个helper类中

使用下面的helper函数，可以让我保持逻辑独立，以便将来编辑，还提供了多种方式来添加类

classNames(styles['foo-bar-baz], 'fa fa-user', 'fa-2x')

classNames([styles['foo-bar-baz], 'fa fa-user', 'fa-2x'])

下面是我的辅助函数。我把它放在help .js中，我把所有常用方法都放在那里。这样一个简单的功能，我避免使用第三方来保持控制

export function classNames (classes) {
    if(classes && classes.constructor === Array) {
        return classes.join(' ')
    } else if(arguments[0] !== undefined) {
        return [...arguments].join(' ')
    }
    return ''
}

2017-07-05 06:50:06

香草JS

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

<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>

2016-08-15 14:01:43

我就是这么做的:

组件:

const Button = ({ className }) => (
  <div className={ className }> </div>
);

调用组件:

<Button className = 'hashButton free anotherClass' />

2017-10-20 10:13:32

我将classNames绑定到导入到组件的css模块。

import classNames from 'classnames'; 
import * as styles from './[STYLES PATH];
const cx = classNames.bind(styles);

classnames提供了以声明的方式为React元素声明className的能力。

ex:

<div classNames={cx(styles.titleText)}> Lorem </div>

<div classNames={cx('float-left')}> Lorem </div> // global css declared without css modules
<div classNames={cx( (test === 0) ?
             styles.titleText : 
             styles.subTitleText)}>  Lorem </div> // conditionally assign classes

<div classNames={cx(styles.titleText, 'float-left')}> Lorem </div> //combine multiple classes

2018-12-27 11:14:20

使用https://www.npmjs.com/package/classnames

import classNames from classNames;

可以使用逗号分隔多个类: <李className ={类名(类。tableCellLabel classes.tableCell)} > < /李>总可以使用多个类，使用逗号和条件分隔: <李className ={类名(类。buttonArea !节点。</li> . length && classes.buttonAreaHidden)}>Hello World

使用数组作为classNames的道具也可以，但会给出警告。

className={[classes.tableCellLabel, classes.tableCell]}

2019-05-29 10:02:36

如何添加多个类到一个ReactJS组件?

推荐文章

最新文章

标签