陣營混合類名類道具

Question

我有一個作出反應的按鈕組件到我添加喜歡的顏色，文字等

道具同時我還使用引導CSS。

所以我有一個按鈕：

<Button text={sometext} color={success} /> 

然後我想要做的是在組件：

<div className="btn btn-lg btn-{this.props.color}" role="button">{this.props.text}</div> 

見的className和{} this.props.color。 ..這不起作用。

我該怎麼做......在className裏添加道具？

Answer 1

您可以使用template literals插值變量：

<div className={`btn btn-lg btn-${this.props.color}`} ... 

Answer 2

渲染視圖前設置一個類變量

const classColor = "btn btn-lg btn-" + this.props.color; 

然後渲染：

<div className={classColor} role="button">{this.props.text}</div> 

Answer 3

另外，使用join：

<div className={['btn btn-lg btn-', this.props.color].join('')}>...