Javascript 使用React添加类

我有一个基本组件，我想在不同类的多个实例中使用

 <div className="module module--{this.props.classModifier}" ></div>

当我使用

渲染上述内容时，它不会影响渲染内容，浏览器输出

{this.props.classModifier}

---

有人能指出我哪里做错了，哪里做错了吗？

此语法将被视为纯字符串：

“模块--{This.props.classModifier}”

。如果要使用JSX追加字符串，请尝试以下语法

className={“module module--”+this.props.classModifier}

正确的语法为：

可以使用ES6中的插值语法

<div className={`module module--${this.props.classModifier}`}></div>

---

您需要将代码更改为：

<div className={`module module--${this.props.classModifier}`}></div>

---

您正在

中使用
this.props.classModifier
”

，因此它将按原样打印。使用模板字符串
用这个

---

作为解释，如果您只使用双引号，那么您只是在呈现一个字符串。它不会得到那样的变量引用。必须使用大括号将变量和字符串部分分开：

//Template Literals
className={`module module--${this.props.classModifier}`}

//Concatenation
className={"module module--" + this.props.classModifier}

---

通常不在React项目中（对于这个特定的示例），尽管它确实有效。（添加“为什么”也很好。）剽窃@T.J.Crowder“为什么”将是对您答案的一个非常有用的扩展。发生这种情况的主要原因是

{this.props.classModifier}

被视为字符串而不是变量。你有选择。可以使用串联或插值。@Ionut-Ah是的。（嗯，通常我会检查编辑…）

//Template Literals
className={`module module--${this.props.classModifier}`}

//Concatenation
className={"module module--" + this.props.classModifier}