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

这里是我的功能：如何引用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值。

我怎样才能使它工作？

来源

2015-10-16 Anthony Kong

ES6 template strings使用${}插值JavaScript，因此我不知道第一个是如何似乎为你工作！

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

来源

2015-10-16 07:06:20

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

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

来源

2015-10-16 04:37:06

'$ styles'来自上面的'import styles ...'行。我需要保留这个 –

className = {$ styles.icon +“”+ btnStyle} dint的工作？ –

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

回答

相关问题