ES6 拓展运算符不能在 问号表达式后面用？

Question

用了css moudules，所以遇到了需要多个css类的问题
如下

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

不能这样用吗？这样就报错了。

之前用的下面这种

style.TopBannerBox + ' ' + style.actAll

这种方式不利于代码整洁，看着很难受。

想明白了，不能用拓展运算符，拓展运算符 编译出来的是 style.TopBannerBox,style.actAll 所以会报错，只是console.log()出来的时候会自动将','分隔为多个值，看起来像 style.TopBannerBox style.actAll ,学艺不精学艺不精！

Answer 1

可以试下这样写:

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

但是在'css modules'中,不推荐这种写法,它推荐的是每个元素只有一个'className',不叠加.这里的情况,可以添加一个类,如'actBox',然后合并上述的两个类:
css-modules composition

// styles.css
.actBox{
 composes : TopBannerBox actAll;
}

className={showall ? styles.actBox : styles.TopBannerBox}

Answer 2

这样呢

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

Answer 3

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