在 React JSX 字符串中嵌套变量答案

【问题标题】：Nesting variables in a React JSX string在 React JSX 字符串中嵌套变量
【发布时间】：2019-01-21 01:30:40
【问题描述】：

我正在修改此代码节

<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'

【问题讨论】：

【解决方案1】：

一旦你已经在模板文字中，你就不需要 JSX 语法了。

你应该使用更多的东西：

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

【讨论】：