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

IT技术 javascript css reactjs ecmascript-6
2021-01-14 10:53:34

我是 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"));
6个回答

我使用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'}`} />
@unyo 请发表您的评论作为答案，以便我可以投票。它非常值得。我一直在寻找像这样简单的东西 1 小时，现在我发现它被埋在了评论中。谢谢你。
2021-03-18 10:53:34
这是一个很好的回应，只是模板文字、三元运算符，您可以使用纯 javascript 实现大多数用例。
2021-03-21 10:53:34
还： <input className={`class1 ${class2}`}>
2021-03-22 10:53:34
我无法理解为什么您要导入一个库（如已接受的答案中所示）来设置一些可以使用 Vanilla JavaScript 设置的类，无论如何，这是一种更高效、更清晰、更易读的解决方案。
2021-03-25 10:53:34
这是正确答案。按照“正确”答案中的建议，为此使用依赖项是过度的。
2021-03-26 10:53:34

当决定要（不）使用的类需要大量逻辑时，我会使用类名。一个过于简单的例子：

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

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

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

无需使用外部库，请参阅下面的答案。
2021-03-17 10:53:34
太糟糕了，你不得不引入一个类名库只是为了向一个元素添加两个类:(
2021-03-19 10:53:34
@user959690 值得注意的是，它现在在使用 Webpack 时由 NPM 安装，以便import classNames from 'classnames'在组件中使用className={classNames(classes.myFirstClass, classes.mySecondClass)} 。
2021-03-29 10:53:34
图书馆还有其他优势： var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return <button className={btnClass}>{this.props.label}</button>;
2021-04-02 10:53:34
@user959690 这是一个例子。当你经常做这些事情并且你对何时需要应用类有复杂的逻辑时，这个库非常好。如果您正在做一些简单的事情，那么肯定只使用模板，但每种情况都不同，读者应该为他们的工作选择正确的工具。
2021-04-13 10:53:34

只需使用 JavaScript。

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

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

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"

<li className={myClassNames} />

或者更简单：

const isEnabled = true;
const isChecked = false;

<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />
使用className={[listOfClasses].join(' ')}它的好主意对我有用，谢谢！
2021-03-17 10:53:34
我更喜欢更性感的 className={[activeClass, data.klass, "main-class"].filter(Boolean).join(' ')}
2021-03-19 10:53:34
@DougWilhelm 我认为这行不通。它隐式调用 toString 并创建一个逗号分隔的类列表。github.com/facebook/react/issues/3138
2021-03-29 10:53:34
这是对我有用的行： className={['terra-Table', medOrder.resource.status]}
2021-04-07 10:53:34

康卡特

无需花哨，我正在使用 CSS module，这很容易

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

<div className={style.style1+ ' ' + style.style2} />

这将导致：

<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">

换句话说，两种风格

条件句

将相同的想法与 if 一起使用会很容易

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

<div className={class1 + ' ' + style.style2} />

ES6

在过去一年左右的时间里，我一直在使用模板文字，所以我觉得它值得一提，我发现它非常具有表现力且易于阅读：

`${class1} anotherClass ${class1}`
忘记了一切实际上只是 JavaScript 并且从未尝试过。谢谢，是一个很大的帮助。
2021-03-17 10:53:34
大声笑，我崩溃了，答案很简单：D。顺便说一句，这也适用于 CSS 加载器module
2021-03-27 10:53:34
这对我有用，以及 '-' 名称，即： <nav className={styles.navbar + " " + styles['navbar-default']}>
2021-03-30 10:53:34
当然可以，只需在上面声明一个变量并有条件地使用它:)
2021-04-09 10:53:34
问题是你不能有可选的类（如果未定义，那么它不会被添加），所以这取决于你确定你的类不是空的（不是可选的）。在可选的情况下，没有比 classes() 这样的助手更好的了。我们可以使用带有模板的三元组，如className={滑块 ${className? ` ${className} : ''}}``。但它很多。[注意：'something '+undefined = 'something underfined'。js动态转换。
2021-04-13 10:53:34

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

<input className={`base-input-class ${class1} ${class2}`}>

（为清晰起见进行了编辑）

所以如果class1不存在，你最终会在中间有那个大的空白。
2021-03-17 10:53:34
这几乎对我有用我只需要插入 class1 并且没有更多错误，所以它看起来像这样 <input className={`${class1} ${class2}`}>
2021-04-05 10:53:34
是的，这最终会出现空格。如果你不想要空格，你可以使用： <input className={['base-input-class', class1, class2].filter(x => x).join(' ')} />
2021-04-10 10:53:34
其它你可能感兴趣的问题
上一篇如何自动重新加载我正在开发的 Chrome 扩展程序？ 下一篇JavaScript curry：有哪些实际应用？