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

Question

这是我的函数：

  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.

中存储的值

我怎样才能让它工作？

Answer 1

试试这个。我不知道 $style 在这里做什么，但这就是你如何将变量用作 className.

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

Answer 2

ES6 template strings 使用 ${} 对 JavaScript 进行插值，所以我不知道第一个似乎对你有用！

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

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

How to reference to a local variable inside reactjs/JSX?

javascript

reactjs

react-jsx