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

ES6 template strings使用${}来插入JavaScript，所以我不知道第一个似乎是如何为你工作的！

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

Answer 2

试试这个。我不知道$style在这里做了什么，但这就是你将变量用作className的方法。

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

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

2 个答案: