首页 > React 如何添加多个className

React 如何添加多个className

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

【热门文章】
【热门文章】