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

在变量中附加一个字符串。这样的事情

const Name = ({value}) => <b>Hello {value}</b> class WelcomeMsg extends React.Component { constructor(props){ super(props) } render() { return ( <div> <Name value={props.userName}/> </div> ) } }

Answer 2

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

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