我是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 & Support <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"));
以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代码替换类名将是这样的:
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} />
)
}
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">
换句话说，两种风格都有
条件
同样的想法也可以用在“如果”上
const class1 = doIHaveSomething ? style.style1 : 'backupClass';
<div className={class1 + ' ' + style.style2} />
ES6
在过去的一年左右，我一直在使用模板文字，所以我觉得它值得一提，我发现它非常有表现力，易于阅读:
`${class1} anotherClass ${class1}`
我将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
使用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]}
