如何引用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中的局部變量？

回答

相關問題