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

我是ReactJS和JSX的新手，我在下面的代码中遇到了一些问题。

我试图添加多个类到每个li上的classNames属性：

 <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>[phone]", 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') ); 

Answer 1

我使用classnames 。 例如：

 ... var liClasses = classNames({ 'main-class': true, 'activeClass': self.state.focused === index }); return (<li className={liClasses}>{data.name}</li>); ... 

Answer 2

我使用ES6 。 例如：

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

然后只是渲染它：

 <input className={classes} /> 

Answer 3

只需使用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'} /> 

Answer 4

CONCAT

不需要花哨我正在使用CSS模块，这很容易

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

换句话说，两种风格

---

更新 – 使用npm包来处理反应中的类

虽然对于我个人来说，这已经绰绰有余了，有时候您可能想要为您的课程添加逻辑，并且可能会变得杂乱无章。

Npm类 – 是一个npm包，可以轻松处理你的类：

 classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar' 

真实世界的例子

 var Button = React.createClass({ // ... render () { 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>; } }); 

Answer 5

您可以使用多个类名创build一个元素，如下所示：

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

当然，您可以使用包含类名称的string，并操作此string来更新元素的类名称。

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

Answer 6

也许classnames可以帮助你。

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

Answer 7

香草JS

不需要外部库 – 只需使用ES6 模板string ：

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

Answer 8

这就是你如何使用ES6来做到这一点的：

 className = {` text-right ${itemId === activeItemId ? 'active' : ''} ${anotherProperty === true ? 'class1' : 'class2'} `} 

你可以列出多个类和条件，也可以包含静态类。 没有必要添加一个额外的库。

祝你好运 ;）

Answer 9

晚会到了，但为什么要用第三方这么简单的问题呢？

你可以像戴维斯（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(' ')} 

两者都很好。 但是对于大型应用程序来说，写入可能变得复杂 为了使其达到最佳状态，我做了与上面相同的事情，但把它放在助手类中

使用我的下面的帮助函数，可以让我保持逻辑分离为将来编辑，也给了我多种方式来添加类

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

要么

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

这是我的帮手function。 我把它放在一个helper.js中，我保留了所有常用的方法。 作为一个简单的function，我避免使用第三方来保持控制

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

Answer 10

只需添加，我们可以过滤掉空的string。

 className={[ 'read-more-box', this.props.className, this.state.isExpanded ? 'open' : 'close', ].filter(x => !!x).join(' ')} 

Answer 11

我使用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 })} /> 

你可以添加任何格式的类（Array，Object，Argument）。 所有来自数组或者参数的真值，以及等于true对象中的键都被合并在一起。

例如：

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

Answer 12

使用Facebook的TodoTextInput.js示例

 render() { return ( <input className={ classnames({ edit: this.props.editing, 'new-todo': this.props.newTodo })} type="text" placeholder={this.props.placeholder} autoFocus="true" value={this.state.text} onBlur={this.handleBlur} onChange={this.handleChange} onKeyDown={this.handleSubmit} /> ) } 

用纯香草js代码replaceclassnames将如下所示：

 render() { return ( <input className={` ${this.props.editing ? 'edit' : ''} ${this.props.newTodo ? 'new-todo' : ''} `} type="text" placeholder={this.props.placeholder} autoFocus="true" value={this.state.text} onBlur={this.handleBlur} onChange={this.handleChange} onKeyDown={this.handleSubmit} /> ) } 

Answer 13

我就是做这个的：

零件：

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

调用组件：

 <Button className = 'hashButton free anotherClass' />