React jsx 设置元素属性

Question

我正在尝试设置来自状态的元素属性

    this.state = {
        label : 'Hello',
        columns: [4, 8],
        test: 'has-success'
    }

我试图像这样设置 col-md 值：

<label className="control-label text-sm-right col-sm-{this.state.columns[0]}">

但这没有用。所以我想看看如果我使用 console.log()

console.log('control-label text-sm-right col-sm-{this.state.columns[0]}');

并且输出显示它没有将值更改为 col-sm-4:

但是当我这样使用它时它起作用了：

<span className="input-group-addon">{this.state.columns[0]}</span>

Answer 1

向变量附加一个字符串。像这样

className={"control-label text-sm-right col-sm-"+this.state.columns[0]}

Answer 2

如果您使用的是 ES6，则可以使用模板字符串文字。

<label className={`control-label text-sm-right col-sm-${this.state.columns[0]}`}>

React jsx setting element attributes