如何添加多个类到一个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 className={`li active`}>Stacy</li>

<li className={`li ${this.state.isActive ? 'active' : ''}`}>Stacy<li>

<li className={'li ' + (this.state.isActive ? 'active' : '') }>Stacy<li>

第二个和第三个，以防您需要有条件地添加或删除类。

2019-07-01 06:06:31

其他回答

你可以像这样创建一个具有多个类名的元素，我尝试了这两种方式，工作正常…

如果你导入任何css，那么你可以这样做: 方式1:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={[styles.class1, styles.class2].join(' ')}>
        { 'text' }
      </div>
    );
  }
}

方式2:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={styles.class1 + ' ' + styles.class2}>
        { 'text' }
      </div>
    );
  }
}

If you applying css as internal : const myStyle = { color: "#fff" }; // React Element using Jsx const myReactElement = ( <h1 style={myStyle} className="myClassName myClassName1"> Hello World! </h1> ); ReactDOM.render(myReactElement, document.getElementById("app")); .myClassName { background-color: #333; padding: 10px; } .myClassName1{ border: 2px solid #000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script> <div id="app"> </div>

2019-06-07 07:41:13

当决定使用(不使用)类需要相当多的逻辑时，我使用类名。举个过于简单的例子:

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

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

也就是说，如果你不想包含依赖项，下面有更好的答案。

2015-12-30 02:02:24

CLSX使这变得简单!

clsx函数可以接受任意数量的参数，每个参数都可以是对象，数组，布尔或字符串。 ——npmjs.com上的CLSX文档

进口:

import clsx from 'clsx'

使用它:

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

2021-01-13 17:27:26

也许类名可以帮助你。

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

2015-12-30 02:04:02

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

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

然后渲染它:

<input className={classes} />

一行程序版本:

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

2016-05-06 13:08:17

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

推荐文章

最新文章

标签