Javascript 如何在reactjs/JSX中引用局部变量？

以下是我的功能：

  import styles from '../common.css'

  class A extends Component {

  ...

    renderBtn(expanded) {
      let btnStyle = expanded ? 'icon-circle-up' : 'icon-circle-down'
      return (
          <button className={`$styles.icon $btnStyle`}> Hi</button>

      );
    }

  }

从“../common.css”导入样式
类扩展组件{
...
renderBtn（扩展）{
让btnStyle=展开？'icon circle up'：'icon circle down'
返回(
你好
);
}
}

不知怎的，HTML是这样出现的：

 <button class='_dqwdqweqwefvasdasdas $btnStyle'> Hi</button>

Hi

上面的

$btnStyle

未解析为变量

btnStyle

中存储的值

---

我怎样才能让它工作呢？

试试这个。我不知道

$style

在这里做什么，但这就是如何将变量用作

类名的方法

<button className={'somestring '+ btnStyle+ ' '+anyOtherVariable}> Hi</button>

Hi
使用
${}
插入JavaScript，所以我不知道第一个脚本是如何为您工作的

`${styles.icon} ${btnStyle}`

$style
来自上面的
导入样式…
行。我需要保留这个