我是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"
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}`
只需使用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'} />
以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} />
)
}
姗姗来迟，但为什么要用第三方来解决这么简单的问题呢?
你可以像@Huw 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(' ')}
两者都很好。但对于大型应用程序来说，编写可能会变得复杂。为了使其达到最佳效果，我做了上面相同的事情，但将其放在一个helper类中
使用下面的helper函数，可以让我保持逻辑独立，以便将来编辑，还提供了多种方式来添加类
classNames(styles['foo-bar-baz], 'fa fa-user', 'fa-2x')
or
classNames([styles['foo-bar-baz], 'fa fa-user', 'fa-2x'])
下面是我的辅助函数。我把它放在help .js中，我把所有常用方法都放在那里。这样一个简单的功能，我避免使用第三方来保持控制
export function classNames (classes) {
if(classes && classes.constructor === Array) {
return classes.join(' ')
} else if(arguments[0] !== undefined) {
return [...arguments].join(' ')
}
return ''
}
我将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]}
你可以像这样创建一个具有多个类名的元素，我尝试了这两种方式，工作正常…
如果你导入任何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>
我通常这样使用它:(在你的情况下)
<li key={index} className={
"component " +
`${activeClass? activeClass: " not-an-active-class "}` +
`${data.class? " " + data.class : " no-data-class "}`
} />
当涉及到JSX和(通常)我们有一些json…然后你循环它…组件。map，加上一些条件来检查json属性是否存在，以根据json中的属性值呈现类名。在下面的例子中，component_color和component_dark_shade是来自component.map()的属性
<div className={
"component " +
`${component_color? component_color: " no-color "}` +
`${component_dark_shade? " " + component_dark_shade : " light "}`
}/>
输出:<div class="组件无色光" ....
或者:<div class="组件蓝色深色" ....根据地图上的值…
一般来说，人们喜欢
<div className={ `head ${style.class1} ${Style.class2}` }><div>
OR
<div className={ 'head ' + style.class1 + ' ' + Style.class2 }><div>
OR
<div className={ ['head', style.class1 , Style.class2].join(' ') }><div>
但是您可以选择创建一个函数来完成这项工作
function joinAll(...classes) {
return classes.join(" ")
}
然后叫它:-
<div className={joinAll('head', style.class1 , style.class2)}><div>
使用jbcn模块。(本支持)
https://www.npmjs.com/package/jbcn
例子:
const classNames = jbcn({
btn: {
alpha: true,
beta: true,
gamma: false
}
});
// ==> "btn btn--alpha btn--beta"
const classNames = jbcn({
expand: true,
hide: false,
btn: {
alpha: true,
beta: true,
gamma: false
}
});
// ==> "expand btn btn--alpha btn--beta"
使用字符串连接来连接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)
你可以使用react-directive，它支持所有的react元素，甚至支持dirIf, dirShow, dirFor和扩展的className等指令
你可以这样做:
import { useState } from 'react'
import directive from 'react-directive';
function Component() {
const [isActive, setIsActive] = useState(true);
const [isDisabled, setIsDisabled] = useState(false);
return <directive.div className={{isActive, isDisabled}}>Contents</directive.div>;
}
// Renders <div class="isActive">Contents</div>
您甚至可以提供一些依赖项，以便在发生任何更改时重新计算类名。
我是图书馆的作者。
