如何向ReactJS组件添加多个类

JavaScript

猪猪卡卡西

2020-03-10

我是ReactJS和JSX的新手,下面的代码有一些问题。

我试图将多个类添加到className每个属性li

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

第437篇《如何向ReactJS组件添加多个类》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
前端Pro 2020.03.10

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

从“类名”中导入类名;

  1. 可以使用逗号分隔的多个类:

    <li className={classNames(classes.tableCellLabel, classes.tableCell)}>Total</li>
    
  2. 可以使用逗号分隔多个类,条件之间用逗号分隔:

    <li className={classNames(classes.buttonArea, !nodes.length && classes.buttonAreaHidden)}>Hello World</li> 
    

使用数组作为classNames的道具也可以工作,但是会发出警告,例如

className={[classes.tableCellLabel, classes.tableCell]}
猪猪Near 2020.03.10

我正在使用React 16.6.3和@Material UI 3.5.1,并且能够在className中使用数组 className={[classes.tableCell, classes.capitalize]}

因此,在您的示例中,以下内容将类似。

<li key={index} className={[activeClass, data.class, "main-class"]}></li>
乐十三 2020.03.10

为了增加更多的课程

... className={`${classes.hello} ${classes.hello1}`...
Gil宝儿JinJin 2020.03.10

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

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

这将导致:

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

您可以执行以下操作:

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

一个简短的解决方案,希望对您有所帮助。

JinJin樱 2020.03.10

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

<input className={`class1 ${class2}`}>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android