当前位置：首页 > Web前端 > HTML

React-JSX实现Class和Style的动态绑定

时间：2023-04-02 21:06:53 HTML

介绍操作class和style是数据绑定的常见需求。频繁操作dom会降低javascript性能。为了提高代码性能，动态绑定类和样式是优质程序成员的选择。本文基于React-JSX语法，结合其他框架的实现方法，介绍如何实现ClassName和Style的动态绑定。注：本文示例均经过验证，希望前端朋友批评指正。绑定HTMLClass对象语法我们可以传递一个对象给className，className可以动态切换类：注意：不支持使用vue、applet等对象语法。错误示例：render(){returnhelloworld

}可以实现的语法如下：1、使用逻辑运算符cssfile.box-color{color:red;}jsfilerender(){returnhelloworld

}2.使用三元运算符css文件.box-show{display:block;}.box-hide{display:none;}render(){returnhelloworld

}3.使用函数绑定的数据对象不需要在模板中内联定义：可以定义一个函数，类似于computedhookvue中的函数js文件getIsError(){返回this.state.isError？'box-color':'';}render(){returnhelloworld

}注意：下面不支持这种写对象变量的方式，不会报错会被举报。控制台className显示为[objectobject]，无效。constclassObj={'box-show':this.state.isShow,'box-color':this.state.isError}render(){returnhelloworld}通常在函数绑定方式用于复杂的项目场景。使用过多会使视图层和逻辑层混乱，难以阅读和维护。推荐使用逻辑运算符和三元运算符来动态绑定Classes。数组语法React-JSX语法不支持className数组语法，试试例子：cssfile.box-hide{display:none;}.box-color{color:red;}jsfilethis.state={isShow:false}render(){returnhelloworld}控制台显示结果（无效，中间有逗号）：helloworld注意：由于不支持数组语法，可以复用box-color中的样式到box-hide中，使用三元运算符来表达，但是会增加CSS代码量。也可以使用ES6模板字符串。代码如下：this.state={isShow:false}render(){returnhelloworld}控制台显示结果（有效）：注意：${'box-color'}和${'box-hide'}之间用空格隔开。绑定内联样式对象语法样式对象语法比clasName对象更直观，处理函数也更简单。逻辑运算符方法和函数绑定方法可以参考className的实现。下面只介绍三元运算符的使用：三元运算类似于Vue的vue-if和微信小程序的wx-if指令，可以用样式三元运算符动态实现。js文件render(){returnhelloworld}数组语法React-JSX语法Style数组语法也不支持，试试例子：jsfilerender(){返回}控制台显示结果（无效）：

SummaryIn为了高质量的完成项目需求，应对越来越复杂的业务场景，大量操作dom元素，任意命名一个style变量，然后绑定class和style是不推荐的。

上一篇：SAPUI5ManagedObjectsAssociationofSAPUI5ManagedObjects解释

下一篇：前端的响应式布局

React-JSX实现Class和Style的动态绑定相关文章

最新推荐

猜你喜欢