The ES6 extension operator cannot be used after a question mark expression.

using css moudules, I encountered the problem of requiring multiple css classes
as follows

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

can"t you use it this way? This makes the report wrong.

the following

was used earlier

style.TopBannerBox + " " + style.actAll

this approach is not good for the neatness of the code and looks uncomfortable.

figured it out, you can"t use the extension operator. The extension operator compiles style.TopBannerBox,style.actAll, so it will report an error, but when console.log () comes out, it will automatically separate", "into multiple values, which looks like style.TopBannerBox style.actAll. If you are not good at learning, you will not be good at learning!

React.js css-modules es6

Mar.15,2021

you can try to write:

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

but in css modules', this is not recommended. It recommends that there is only one 'className', per element without superposition. In this case, you can add a class, such as' actBox', and then merge the above two classes:
css-modules composition

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

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

how about this

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

A change of ideas can be put in front of
< div className= {.this.state.showall? [style.TopBannerBox,style.actAll]: [style.TopBannerBox]} >

Previous: Problems in the use of spring boot redis

Next: What are the simple and feasible ie9 ie8 WebSocket support solutions?