鍍金池/ 問(wèn)答/Python  HTML/ ES6 拓展運(yùn)算符不能在 問(wèn)號(hào)表達(dá)式后面用?

ES6 拓展運(yùn)算符不能在 問(wèn)號(hào)表達(dá)式后面用?

用了css moudules,所以遇到了需要多個(gè)css類(lèi)的問(wèn)題
如下

 <div className={this.state.showall?...[style.TopBannerBox,style.actAll]:style.TopBannerBox}>

不能這樣用嗎?這樣就報(bào)錯(cuò)了。

之前用的下面這種

style.TopBannerBox + ' ' + style.actAll

這種方式不利于代碼整潔,看著很難受。

想明白了,不能用拓展運(yùn)算符,拓展運(yùn)算符 編譯出來(lái)的是 style.TopBannerBox,style.actAll 所以會(huì)報(bào)錯(cuò),只是console.log()出來(lái)的時(shí)候會(huì)自動(dòng)將','分隔為多個(gè)值,看起來(lái)像 style.TopBannerBox style.actAll ,學(xué)藝不精學(xué)藝不精!

回答
編輯回答
浪蕩不羈

可以試下這樣寫(xiě):

className={showall ? [styles.TopBannerBox, styles.actAll].join(' ') : styles.TopBannerBox}

但是在'css modules'中,不推薦這種寫(xiě)法,它推薦的是每個(gè)元素只有一個(gè)'className',不疊加.這里的情況,可以添加一個(gè)類(lèi),如'actBox',然后合并上述的兩個(gè)類(lèi):
css-modules composition

// styles.css
.actBox{
 composes : TopBannerBox actAll;
}
className={showall ? styles.actBox : styles.TopBannerBox}
2017年4月30日 04:41
編輯回答
醉淸風(fēng)

換種思路可以放前面啊
<div className={...this.state.showall?[style.TopBannerBox,style.actAll]:[style.TopBannerBox]}>

2018年9月5日 21:49
編輯回答
喜歡你

這樣呢

<div className={this.state.showall?(...[style.TopBannerBox,style.actAll]):style.TopBannerBox}>
2017年11月12日 02:49