React-JSX中如何实现Class与Style的动态绑定（附实例）(2)-木庄网络博客

css文件

.box-hide {
  display: none;
}
 
.box-color {
  color：red;
}

js文件

this.state = {isShow: false}
 
render(){
  return <p className={ this.state.isShow ? 'box-color' : [ 'box-color', 'box-hide'] }>hello world</p>
}

控制台显示结果（无效，中间多了个逗号）:

1	`<p` `class="box-color, box-hide">hello world</p>`

注：既然不支持数组语法，你只能将“box-color”中的样式复用到“box-hide”中，使用三元运算符来表示，这样无形中增加了css代码量。

style对象语法比clasName对象更加直观，处理的功能更加简单，逻辑运算符方法和函数绑定方法可以参考className的实现，下面只介绍三元运算符的使用：

类似Vue的vue-if、微信小程序的wx-if指令，可以用style三元运算符动态实现

js文件

render(){
  return <p style={ this.state.isShow ? {display: 'inline-block'} : { display: 'none'} }>hello world</p>
}

React-JSX语法也不支持style数组语法，尝试样例：

js文件

render(){
  return <p style={ this.state.isShow ? {color: 'red'} : [{color: 'red'}, {display: 'inline-block'}] }></p>
}

控制台显示结果（无效）：

<p></p>

总之，为了高质量的完成项目需求，应付越来越复杂的业务场景，那种大量操作dom元素，随意命名一个样式变量，然后绑定到class和style的做法是不提倡的。

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者