如何添加多个类到ReactJS组件？
我是ReactJS和JSX的新手，我对下面的代码有一点问题。
我正在尝试向每个li上的className属性添加多个类：
<li key={index} className={activeClass, data.class, "main-class"}></li>
我的React组件是：
jsx prettyprint-override">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"));
共有3个答案
只需使用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'} />
当决定（不）使用类需要相当多的逻辑时，我使用类名。一个过于简单的例子：
...
var liClasses = classNames({
'main-class': true,
'activeClass': self.state.focused === index
});
return (<li className={liClasses}>{data.name}</li>);
...
也就是说，如果您不想包含依赖项，那么下面有更好的答案。
我使用ES6模板文字。例如：
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'}`} />
-
问题内容： 我是ReactJS和JSX的新手，下面的代码有一些问题。 我试图将多个类添加到每个属性： 我的React组件是： 问题答案： 当确定（不）使用的类需要大量逻辑时，我使用类名。一个 过于简单的例子 ： 就是说，如果您不想包含依赖项，那么下面会有更好的答案。
-
问题内容： 我是ReactJS和JSX的新手，下面的代码有一些问题。 我试图将多个类添加到每个属性： 我的React组件是： 问题答案： 当确定（不）使用的类需要大量逻辑时，我使用类名。一个 过于简单的例子 ： 就是说，如果您不想包含依赖项，那么下面会有更好的答案。
-
问题内容： 我有一个 JFrame 。 我也有一个 Box 类，它扩展了 Component 。该box类具有一个 paint 方法，该方法可以创建一个填充的矩形。 当我将这些Box组件的多个添加到我的JFrame时，当我在JFrame上调用 重绘 时，仅显示最近添加的一个。 我看了一下布局管理器，但是我不确定那不是我想要的。我所希望的是能够在屏幕上的任何位置制作整个矩形的动画。 （我还尝试创建一
-
我知道我们在函数组件中使用history.push（），并对重定向路由做出反应。但是在类组件中，我们如何在点击按钮时重定向
-
我有两件事情要做：在鼠标悬停时突出显示JPanel，在鼠标拖动时移动一个蓝色方块。问题是，这需要我将MouseListeners添加到不同的组件中。当我这样做时，我只能使用一个功能——另一个被阻止了。我该怎么做才能让两个功能都工作？ 注意：有时候JFrame不会显示任何东西——你只需要一直运行它，直到它显示为止（通常需要2-3次尝试）。如果它做了任何其他奇怪的事情，就继续运行它，直到它工作。如果之
-
注意：“else”语句只是出于测试目的，似乎表明if语句没有正常工作，因为当我测试时，它总是被触发。