我是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"));
我使用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
})} />
你可以添加任何格式的类(数组，对象，参数)。数组或参数中的所有真值加上对象中等于true的键将合并在一起。
例如:
ReactClassNames('a', 'b', 'c') // => "a b c"
ReactClassNames({ 'a': true, 'b': false, c: 'true' }) // => "a c"
ReactClassNames(undefined, null, 'a', 0, 'b') // => "a b"
我将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
以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} />
)
}
使用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]}
