如何将多个类添加到 ReactJS 组件? [英] How to add multiple classes to a ReactJS Component?
本文介绍了如何将多个类添加到 ReactJS 组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 ReactJS 和 JSX 的新手,我对下面的代码有一点问题.
我正在尝试向每个 li
的 className
属性添加多个类:
我的 React 组件是:
var AccountMainMenu = React.createClass({getInitialState:函数(){返回 { 重点:0 };},点击:功能(索引){this.setState({focused: index });},渲染:函数(){var self = this;var accountMenuData = [{name: "我的账户",图标:图标帐户"},{name: "消息",图标:图标消息"},{name: "设置",图标:图标设置"}/*{name:"Help & Support <span class='font-awesome icon-support'></span>(888) 664.6261",listClass:无移动最后帮助支持最后"}*/];返回 (<div className="acc-header-wrapper clearfix"><ul className="acc-btns-container">{accountMenuData.map(function(data, index) {var activeClass = "";如果(self.state.focused == index){activeClass = "活动";}返回 ();})}
);}});ReactDOM.render(
解决方案
我使用 classnames决定要(不)使用的类所需的大量逻辑.一个过于简单的例子:
<代码>...var liClasses = classNames({'主类':真的,'activeClass': self.state.focused === 索引});return (<li className={liClasses}>{data.name}</li>);...
也就是说,如果您不想包含依赖项,那么下面有更好的答案.
I am new to ReactJS and JSX and I am having a little problem with the code below.
I am trying to add multiple classes to the className
attribute on each li
:
<li key={index} className={activeClass, data.class, "main-class"}></li>
My React component is:
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"));
解决方案
I use classnames when there is a fair amount of logic required for deciding the classes to (not) use. An overly simple example:
...
var liClasses = classNames({
'main-class': true,
'activeClass': self.state.focused === index
});
return (<li className={liClasses}>{data.name}</li>);
...
That said, if you don't want to include a dependency then there are better answers below.
这篇关于如何将多个类添加到 ReactJS 组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文