Question

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

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

当我使用<...classModifier="red" />渲染以上内容时，它不会影响渲染的内容，并且浏览器会输出{this.props.classModifier}

有人可以指出我在哪里和哪里做错了吗？

Answer 1

此语法将被视为纯字符串："module module--{this.props.classModifier}"。如果要使用JSX附加字符串，请尝试使用以下语法className={"module module--" + this.props.classModifier}。

Answer 2

正确的语法为：

您可以使用ES6中的插值语法。

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

Answer 3

作为解释，如果仅使用双引号，则仅呈现字符串。它不会像那样获得变量引用。您必须使用花括号将变量和字符串部分分开：

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

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

Answer 4

您需要对此进行更改代码：

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

Answer 5

您正在this.props.classModifier中使用""，因此它将按原样打印。使用模板字符串
使用这个

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

用React添加类

5 个答案: