<div className={value.class}>{value.value}</div>
动态的添加class 这样只能添加一个class
如果
<div className={value.class value.class2}>{value.value}</div>
这样会报错
但是我想要渲染后的结果是
<div class="class1 class2">谢谢你</div>
怎么可以做到 还是需要插件?
可以使用classname
用拼接字符串的方法就行了
再定义个value.class3 = “class1 class2”
<div className={value.class + " " + value.class2}>{value.value}</div>
拼接字符串啊……
要不喜欢的话用字符串模板也行啊
<div className={`${value.class} ${value.class2}`}>{value.value}</div>
花括号里面就是可以运算的部分啊
如果是数组的话直接join也行啊
<div className={classnames.join(" ")}>{value.value}</div>
import cs from 'classnames'//引入classnames依赖库
const addClass2 = true
<div className=cs({"class1":true,"class2":addClass2})>{value.value}</div>
classnames的github地址https://github.com/JedWatson/classnames
可以用react-addons的classSet方法
npm:https://www.npmjs.com/package...
var addons = require('react-addons');
....
....
render: function(){
var cx = addons.classSet;
var classSets = cx({
"nav": true,
"nav-fix": this.state.beFix,
});
return (
<div id="nav" className={classSets} >
fixtop
</div>
)
}
手册 http://reactjs.cn/react/docs/...