React 如何添加多个className_Node.js_论坛

React 如何添加多个className

陈***6 分类：Node.js 人气：1745 回帖：8 发布于6年前收藏

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

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

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

这样会报错

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

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

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

标签：react-router react.js node.js javascript

讨论这个帖子（8）垃圾回帖将一律封号处理……

Lv2 入门

xi***iu JS工程师 6年前#1

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

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

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

Lv6 码匠

生***炸 UI设计师 6年前#2

const class=require(path.css);

Lv6 码匠

a8***12 Linux系统工程师 6年前#3

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

Lv3 码奴

路***甲移动开发工程师 6年前#4

可以使用classname

Lv1 新人

in***ex 职业无 6年前#5

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

Lv7 码师

这***人 JS工程师 6年前#6

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

Lv6 码匠

马***0 软件测试工程师 6年前#7

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

Lv6 码匠

阿***6 Linux系统工程师 6年前#8

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

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取