vue jsx 怎么动态绑定class？

Question

代码如下：

renderContent (h, { node, data, store }) {
    let icon = data.icon
    return (
        <span>
            <span>
                <i class={{'iconfont': true, icon: true}} style="width: 25px; display: inline-block;"></i>
                <span>{node.label}</span>
            </span>
        </span>
    )
},

i标签内有两个class，一个固定的'iconfont'，还一个由请求数据获取是动态绑定的，问题是我这么写不行，只解析出固定的那个class，问该怎么做？

Answer 1

<i class={[icon, 'iconfont']}></i>

如此

Answer 2

<el-card class={this.optionData.placement === 'left-bottom' ? 'cardLeftBottom' : this.optionData.placement === 'left-top' ? 'cardLeftTop' : this.optionData.placement === 'right-bottom' ? 'cardRightBottom' : this.optionData.placement === 'right-top' ? 'cardRightTop' : '' }>

Answer 3

我也遇到这个问题，放在jsx里冒号就变成无法识别的标识符了，如果解决了请教教我~

Answer 4

如果你用的vue的话，你可以写成这样，不要写固定的class，写一个:class,<div :class="icon == true? 'icon':'iconfont' ">哈哈哈</div>

Answer 5

class前面加个冒号就好了,其他的还是照常写,给个变量,值就是你随时要改变的class名字