使用 React 添加类

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

您需要将代码更改为：

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

Answer 4

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

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

Answer 5

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

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

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

使用 React 添加类

Adding classes with React

javascript

reactjs

babeljs

react-dom

使用 React 添加 类

Adding classes with React

javascript

reactjs

babeljs

react-dom

使用 React 添加类