React Mix ClassName类和props

Question

我有一个React按钮组件，我正在添加颜色，文本等道具。

同时我也使用Bootstrap css。

所以我有一个按钮：

ClientSearch

然后我想要做的是组件：

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

请参阅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

或者，使用terminal.png：

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