我是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"));
使用字符串连接来连接CSS类是个坏主意。在很多情况下，这是非常令人困惑和压倒性的。最好添加一些简单的帮助器，将所有这些连接到一个字符串中。这里有一个例子:
import isString from 'lodash/isString';
import isObject from 'lodash/isObject';
/**
* Helper function for conditionally creating css class strings.
*
* Example usage:
* classNames('foo', ['bar', ''], { baz: false, bob: true });
* => 'foo bar bob'
*
* @module helpers/classNames
* @param {...(String|String[]|Object)} args
* @returns {String}
*/
export default function classNames(...args) {
const classes = [];
for (const arg of args) {
if (arg !== null && typeof arg !== 'undefined') {
if (isString(arg)) {
classes.push(arg);
} else if (Array.isArray(arg)) {
classes.push(classNames(...arg));
} else if (isObject(arg)) {
classes.push(classNames(...Object.keys(arg).filter(k => arg[k])));
}
}
}
return classes.join(' ');
}
(来自https://tomsoir.medium.com/react-css-classnames-concatenation-pattern-fd0fa1f31143)
只需使用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'} />
我将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
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}`
