在React JSX字符串中嵌套变量

Question

我正在修改此代码节

<div className={`${css['red']} ${css['blue']}`}>
    ...
</div>

为此，将blue字符串更改为变量

var colorVariable = 'blue'
<div className={`${css['red']} ${css[{colorVariable}]}`}>
    ...
</div>

但这不会产生任何作用。 ${css['{colorVariable}']}也没有。

执行${css[${colorVariable}]}会导致错误。

在字符串中下一个JSX变量的正确方法是什么？

编辑： css对象的定义如下

import css from 'assets/style.scss'

Answer 1

一旦您已经在模板文字内部，就不需要JSX语法。

您应该使用更多类似的方式：

`${css['red']} ${css[colorVariable]}`