我是 ReactJS 和 JSX 的新手，我对下面的代码有一点问题。
我试图在每个li的clName属性中添加多个类：
<li key={index} clName={activeCl, data.cl, "main-cl"}></li>
我的反应组件是：
var AccountMainMenu = React.createCl({
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 cl='font-awesome icon-support'></span>(888) 664.6261",
listCl:"no-mobile last help-support last"
}*/
];
return (
<div clName="acc-header-wrapper clearfix">
<ul clName="acc-btns-container">
{accountMenuData.map(function(data, index) {
var activeCl = "";
if (self.state.focused == index) {
activeCl = "active";
}
return (
<li
key={index}
clName={activeCl}
onClick={self.clicked.bind(self, index)}
>
<a href="#" clName={data.icon}>
{data.name}
</a>
</li>
);
})}
</ul>
</div>
);
}
});
ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));
586
我使用ES6template literals。例如：
const error = this.state.valid ? '' : 'error'
const cles = `form-control round-lg ${error}`
然后只是渲染它：
<input clName={cles} />
单行版本：
<input clName={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />
294
我使用clnames当需要相当数量的逻辑来决定类（不）使用。过于简单的例子：
...
var liCles = clNames({
'main-cl': true,
'activeCl': self.state.focused === index
});
return (<li clName={liCles}>{data.name}</li>);
...
也就是说，如果你不想包含依赖项，那么下面有更好的答案。
253
只需使用 JavaScript。
<li clName={[activeCl, data.kl, "main-cl"].join(' ')} />
如果要在对象中添加基于类的键和值，可以使用以下内容：
function clNames(cles) {
return Object.entries(cles)
.filter(([key, value]) => value)
.map(([key, value]) => key)
.join(' ');
}
const cles = {
'maybeCl': true,
'otherCl': true,
'probablyNotCl': false,
};
const myClNames = clNames(cles);
// Output: "maybeCl otherCl"
<li clName={myClNames} />
或者更简单：
const isEnabled = true;
const isChecked = false;
<li clName={[isEnabled && 'enabled', isChecked && 'checked']
.filter(e => !!e)
.join(' ')
} />
// Output:
// <li clName={'enabled'} />
175
Concat
不需要花哨我使用 CSS 模块，这很容易
import style from '/css/style.css';
<div clName={style.style1+ ' ' + style.style2} />
这将导致：
<div cl="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">
换句话说，这两种风格
Conditionals
这将是很容易使用相同的想法，如果的
const cl1 = doIHaveSomething ? style.style1 : 'backupCl';
<div clName={cl1 + ' ' + style.style2} />
第六版
在过去xx年左右的时间里，我一直在使用模板文字，所以我觉得它值得一提，我发现它非常富有表现力，易于阅读：
`${cl1} anotherCl ${cl1}`
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（38条）