我是 ReactJS 和 JSX 的新手,我对下面的代码有一点问题。
我正在尝试向每个 li
的 className
属性添加多个类:
<li key={index} className={activeClass, data.class, "main-class"}></li>
我的反应组件是:
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"));
classNames={{foo: true, bar: true, baz: false}}
和 classNames={["foo", "bar"]}
不能工作?
<div className={classes(isTrue && "willRenderThisClass")} />
我使用 ES6
template literals。例如:
const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`
然后渲染它:
<input className={classes} />
单行版本:
<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />
当决定(不)使用的类需要大量逻辑时,我使用 classnames。一个过于简单的例子:
...
var liClasses = classNames({
'main-class': true,
'activeClass': self.state.focused === index
});
return (<li className={liClasses}>{data.name}</li>);
...
也就是说,如果您不想包含依赖项,那么下面有更好的答案。
import classNames from 'classnames'
然后在组件 className={classNames(classes.myFirstClass, classes.mySecondClass)}
中使用。
var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return <button className={btnClass}>{this.props.label}</button>;
只需使用 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'} />
className={['terra-Table', medOrder.resource.status]}
className={[listOfClasses].join(' ')}
的好主意它对我有用,谢谢!
康卡特
无需花哨,我正在使用 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">
换句话说,两种风格
条件句
与 if 一起使用相同的想法会很容易
const class1 = doIHaveSomething ? style.style1 : 'backupClass';
<div className={class1 + ' ' + style.style2} />
ES6
在过去一年左右的时间里,我一直在使用模板文字,所以我觉得它值得一提,我发现它非常有表现力且易于阅读:
`${class1} anotherClass ${class1}`
className={
slider${className? `${className}: ''}
}`。但是很多。 [注:'某事'+未定义='某事欠佳'。 js动态转换。
这可以通过 ES6 模板文字来实现:
<input className={`base-input-class ${class1} ${class2}`}>
(为清楚起见进行了编辑)
<input className={`${class1} ${class2}`}>
class1
不存在,您最终会在中间出现那个大空白。
<input className={['base-input-class', class1, class2].filter(x => x).join(' ')} />
您可以创建一个具有多个类名的元素,如下所示:
<li className="class1 class2 class3">foo</li>
当然,您可以使用包含类名的字符串并操作此字符串来更新元素的类名。
var myClassNammes = 'class1 class2 class3';
...
<li className={myClassNames}>foo</li>
"
而不是 '
。对于那个很抱歉。
使用 ES6 可以做到这一点:
className = {`
text-right
${itemId === activeItemId ? 'active' : ''}
${anotherProperty === true ? 'class1' : 'class2'}
`}
您可以列出多个类和条件,也可以包含静态类。没有必要添加额外的库。
祝你好运 ;)
香草JS
不需要外部库 - 只需使用 ES6 template strings:
<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
classnames
库会使生活更轻松。但同样,对于这样一个简单的例子,模板字符串肯定是要走的路!
我认为我们不需要使用外部包来添加多个类。
我个人使用
<li className={`li active`}>Stacy</li>
或者
<li className={`li ${this.state.isActive ? 'active' : ''}`}>Stacy<li>
或者
<li className={'li ' + (this.state.isActive ? 'active' : '') }>Stacy<li>
第二个和第三个,以防您需要有条件地添加或删除类。
一般人都喜欢
<div className={ `head ${style.class1} ${Style.class2}` }><div>
或者
<div className={ 'head ' + style.class1 + ' ' + Style.class2 }><div>
或者
<div className={ ['head', style.class1 , Style.class2].join(' ') }><div>
但是您可以选择创建一个函数来完成这项工作
function joinAll(...classes) {
return classes.join(" ")
}
然后这样称呼它:-
<div className={joinAll('head', style.class1 , style.class2)}><div>
也许 classnames 可以帮助您。
var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'
您可以执行以下操作:
<li key={index} className={`${activeClass} ${data.class} main-class`}></li>
一个简短而简单的解决方案,希望这会有所帮助。
可以使用 https://www.npmjs.com/package/clsx 完成:
https://www.npmjs.com/package/clsx
首先安装它:
npm install --save clsx
然后将其导入您的组件文件中:
import clsx from 'clsx';
然后在您的组件中使用导入的函数:
<div className={ clsx(classes.class1, classes.class2)}>
只需添加,我们就可以过滤掉空字符串。
className={[
'read-more-box',
this.props.className,
this.state.isExpanded ? 'open' : 'close',
].filter(x => !!x).join(' ')}
您可以像这样创建具有多个类名的元素,我尝试了这两种方式,它工作正常......
如果您导入任何 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>
);
}
}
**
如果您将 css 应用为 internal :
常量 myStyle = { 颜色:“#fff”}; // React Element 使用 Jsx const myReactElement = (
.join(' ')
很好。但我们可以避免这种情况并使用模板字符串 className={${styles.class1}
${styles.class2}
}
更多课程添加
... className={`${classes.hello} ${classes.hello1}`...
我知道这是一个迟到的答案,但我希望这会对某人有所帮助。
考虑到您在 css 文件 'primary'、'font-i'、'font-xl' 中定义了以下类
第一步是导入 CSS 文件。
然后
会成功的!
欲了解更多信息:https://www.youtube.com/watch?v=j5P9FHiBVNo&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=20
这似乎对我有用
<Link className={[classes.button, classes.buttonFirst]}>
Type 'string[]' is not assignable to type 'string'.
使用 CSS 模块(或 Sass 模块),您也可以将样式隔离到特定组件。
“组件范围的 CSS 允许您以最小的副作用编写传统的、可移植的 CSS:不再担心选择器名称冲突或影响其他组件的样式。”
import * as styles from "./whatever.module.css" // css version
import * as styles from "./whatever.module.scss" // sass version
<div className={`${styles.class1} ${styles.class2}`}>
INSERT YOUR CODE HERE
</div>
迟到了,但为什么要使用第三方来解决这么简单的问题?
你可以像@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(' ')}
两者都很好。但是对于大型应用程序而言,编写可能会变得复杂。为了使其最佳化,我做了同样的事情,但把它放在一个帮助类中
使用我下面的辅助函数,允许我将逻辑分开以供将来编辑,并且还为我提供了多种添加类的方法
classNames(styles['foo-bar-baz], 'fa fa-user', 'fa-2x')
或者
classNames([styles['foo-bar-baz], 'fa fa-user', 'fa-2x'])
这是我下面的辅助函数。我把它放在了一个 helper.js 中,我保留了我所有的常用方法。作为一个如此简单的功能,我避免使用 3rd 方来保持控制
export function classNames (classes) {
if(classes && classes.constructor === Array) {
return classes.join(' ')
} else if(arguments[0] !== undefined) {
return [...arguments].join(' ')
}
return ''
}
您可以使用数组,然后使用空格连接它们。
<li key={index} className={[activeClass, data.class, "main-class"].join(' ')}></li>
这将导致:
<li key={index} class="activeClass data.class main-class"></li>
创建一个这样的函数
function cssClass(...c) {
return c.join(" ")
}
需要时调用它。
<div className={cssClass("head",Style.element,"black")}><div>
当我有许多不同的课程时,我发现以下内容很有用。
过滤器删除任何 null
值,并且连接将所有剩余值放入空格分隔的字符串中。
const buttonClasses = [
"Button",
disabled ? "disabled" : null,
active ? "active" : null
].filter((class) => class).join(" ")
<button className={buttonClasses} onClick={onClick} disabled={disabled ? disabled : false}>
使用 facebook's TodoTextInput.js example
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} />
)
}
如果您不想导入另一个模块,此函数的工作方式类似于 classNames
模块。
function classNames(rules) {
var classes = ''
Object.keys(rules).forEach(item => {
if (rules[item])
classes += (classes.length ? ' ' : '') + item
})
return classes
}
你可以像这样使用它:
render() {
var classes = classNames({
'storeInfoDiv': true,
'hover': this.state.isHovered == this.props.store.store_id
})
return (
<SomeComponent style={classes} />
)
}
function classNames(rules) { return Object.entries(rules) .reduce( (arr, [cls, flag]) => { if (flag) arr.push(cls); return arr }, [] ).join(" ") }
使用https://www.npmjs.com/package/classnames
从“类名”导入类名;
可以使用多个使用逗号分隔的类:
使用数组作为类名的道具也可以,但会发出警告,例如
className={[classes.tableCellLabel, classes.tableCell]}
clsx 让这一切变得简单!
“clsx 函数可以接受任意数量的参数,每个参数都可以是对象、数组、布尔值或字符串。” -- npmjs.com 上的 clsx 文档
导入它:
import clsx from 'clsx'
用它:
<li key={index} className={clsx(activeClass, data.class, "main-class")}></li>
我使用了这个语法
<div
className={[
"d-inline-flex justify-content-center align-items-center ",
withWrapper && `ft-icon-wrapper ft-icon-wrapper-${size}`,
wrapperClass,
].join(" ")}
>
<img
className={`ft-icon ft-icon-${size} ${iconClass}`}
alt={id}
src={icon}
/>
</div>
我就是做这个的:
零件:
const Button = ({ className }) => (
<div className={ className }> </div>
);
调用组件:
<Button className = 'hashButton free anotherClass' />
我正在使用 React 16.6.3 和 @Material UI 3.5.1,并且能够在 className 中使用数组,例如 className={[classes.tableCell, classes.capitalize]}
因此,在您的示例中,以下内容将类似。
<li key={index} className={[activeClass, data.class, "main-class"]}></li>
不定期副业成功案例分享
<input class=" form-control input-lg round-lg" />
。请注意开头的额外空间。这是有效的,但丑陋。甚至 react FAQ 推荐另一种方式或使用类名包:reactjs.org/docs/faq-styling.htmltrim()
轻松避免。className={ `${ props.variable } ${ props.variabletwo }` }
成功了!几个小时不知道如何搜索这个,通过这个答案补救。