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>

      );
    }

  }

HTML以某种方式出来:

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

上面的$btnStyle不能解析为存储在变量btnStyle中的值。

我如何使它工作？

最佳答案

ES6 template strings使用${}内插JavaScript，所以我不知道第一个似乎对您有用!

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