我是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，那么你可以这样做:
方式1:
import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
render() {
return (
<div className={[styles.class1, styles.class2].join(' ')}>
{ 'text' }
</div>
);
}
}
方式2:
import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
render() {
return (
<div className={styles.class1 + ' ' + styles.class2}>
{ 'text' }
</div>
);
}
}
**
If you applying css as internal :
const myStyle = {
color: "#fff"
};
// React Element using Jsx
const myReactElement = (
<h1 style={myStyle} className="myClassName myClassName1">
Hello World!
</h1>
);
ReactDOM.render(myReactElement, document.getElementById("app"));
.myClassName {
background-color: #333;
padding: 10px;
}
.myClassName1{
border: 2px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="app">
</div>
使用字符串连接来连接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)
