React 如何添加多个className

Question

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

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

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

这样会报错

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

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

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

Answer 1

<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>

Answer 2

import classNames from 'classnames'//引入classnames依赖库
const addClass2 = true


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

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

const class=require(path.css);

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

Answer 7

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

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

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

Answer 8

<div className={`menu-cover ${show?'menu-active':''}`}>
  {/* your code */}
</div>

Answer 9

function classnames(...classnames) {

return classnames.join(' ')

}

Answer 10

可以使用classname