React 如何添加多个className

秋雨
  • 438
<div className={value.class}>{value.value}</div>

动态的添加class 这样只能添加一个class
如果

<div className={value.class value.class2}>{value.value}</div>

这样会报错

但是我想要渲染后的结果是

<div class="class1 class2">谢谢你</div>

怎么可以做到 还是需要插件?

评论
阅读 34.8k
10 个回答
✓ 已被采纳
<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 classNames from 'classnames'//引入classnames依赖库
const addClass2 = true


<div className={classNames({"class1":true,"class2":addClass2})}>{value.value}}</div>

classnames的github地址https://github.com/JedWatson/...

LiuKk
  • 2
新手上路,请多包涵

再定义个value.class3 = “class1 class2”

可以用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/...

用拼接字符串的方法就行了

S35_张路
  • 2
新手上路,请多包涵

const class=require(path.css);

<div className={class.one+" "+class.two}></div>

S_YULE
  • 3
新手上路,请多包涵

如果class名字少,又不想额外引入依赖的话

<div className={stores.length === index + 1 ? 'shop-detail-plus no-border-bottom' : 'shop-detail-plus'} key={index}>
</div>

问号前边就是你的判断,比较偷懒。哈哈

生半夏
  • 4
新手上路,请多包涵
<div className={`menu-cover ${show?'menu-active':''}`}>
  {/* your code */}
</div>
Confetti7
  • 2
新手上路,请多包涵

function classnames(...classnames) {

return classnames.join(' ')

}

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏