React-JSX实现Class与 Style 动态绑定

phodal 发布于2019-08-23 10:48 / 1073人阅读

摘要：错误例子可以实现的语法如下使用逻辑运算符文件文件使用三元运算符文件使用函数绑定的数据对象也不必内联定义在模板里可以定义一个函数，类似中的钩子函数。

作者：羽徵

摘要：操作元素的 class 列表和内联样式是数据绑定的一个常见需求，频繁操作dom元素会降低javascript性能，为了实现高性能js，动态绑定class和style是高素养程序员的必选。本文以React-JSX语法为基础，结合其它框架的实现方法，介绍如何实现ClassName 与 Style 的动态绑定。

注：本文实例都已经过验证，错误的请广大道友批评指正。

绑定 HTML Class 对象语法

我们可以传给 className 一个对象，以动态地切换 class：

注：使用类似vue、小程序等对象语法是不支持的。

错误例子：

render(){
  return hello world
}

可以实现的语法如下：

1、使用逻辑运算符

css文件

.box-color {
  color：red;
}

js文件

render(){
  return hello world
}

2、使用三元运算符

css文件

.box-show {
  display: block;
}

.box-hide {
  display: none;
}

render(){
  return hello world
}

3、使用函数

绑定的数据对象也不必内联定义在模板里：可以定义一个函数，类似vue中的computed钩子函数。

js文件

getIsError() {
  return this.state.isError ? "box-color" : "";
}

render(){
  return hello world
}

注：下面这种对象变量写法是不支持的，也不会报错，控制台className显示为[object object]，无效。

const classObj = {
  "box-show": this.state.isShow,
  "box-color": this.state.isError
}

render(){
  return hello world
}

一般在项目逻辑比较复杂的场景中使用函数绑定方法，使用过多会使得视图层和逻辑层交杂混乱，难以阅读和维护，建议使用逻辑运算符和三元运算符方法动态绑定Class。

数组语法

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

css文件

.box-hide {
  display: none;
}

.box-color {
  color：red;
}

js文件

this.state = {isShow: false}

render(){
  return hello 
         world
}

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

hello world

注：既然不支持数组语法，你可以将“box-color”中的样式复用到“box-hide”中，使用三元运算符来表示，这样无形中增加了css代码量，也可以用ES6模板字符串实现，如下：

this.state = {isShow: false}

render(){
  return hello world
}

控制台显示结果(有效)：

注：${"box-color"}和${"box-hide"}中间用空格隔开。

绑定内联样式 对象语法

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

三元运算符

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

js文件

render(){
  return hello world
}

数组语法

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

js文件

render(){
  return 
}

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

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

云服务器 GPU云服务器绑定Style样式绑定class 动态域名绑定 python动态绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96707.html

React-JSX实现Class与 Style 动态绑定

摘要：错误例子可以实现的语法如下使用逻辑运算符文件文件使用三元运算符文件使用函数绑定的数据对象也不必内联定义在模板里可以定义一个函数，类似中的钩子函数。作者：羽徵摘要：操作元素的 class 列表和内联样式是数据绑定的一个常见需求，频繁操作dom元素会降低javascript性能，为了实现高性能js，动态绑定class和style是高素养程序员的必选。本文以React-JSX语法为基础，...

waterc 2019-08-02 11:10 评论0 收藏0
Vue.js-计算属性和class与style绑定

摘要：每一个计算属性都包含一个和一个。使用计算属性的原因在于它的依赖缓存。及与绑定的主要用法是动态更新元素上的属性。测试文字当的表达式过长或逻辑复杂时，还可以绑定一个计算属性。学习笔记：前端开发文档计算属性所有的计算属性都以函数的形式写在Vue实例中的computed选项内，最终返回计算后的结果。计算属性的用法在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终...

Shihira 2019-08-23 16:02 评论0 收藏0
【Angular】Angular 2+ 样式绑定解析

摘要：接下来我们就来具体看看如果在组件中使用样式绑定。优先级最高，会覆盖已有的样式属性。直接绑定类名，或者类型的变量。引言开发ngx（angular 2+ 以后都直接称为ngx）也有1年半的时间了，刚开始开发的时候使用的还是angular2 RC版，现在已经出angular5了，时光飞逝啊！ngx从设计之初就是一个component-based的框架，所以大到一个页面，小到一个按钮，都是...

roland_reed 2019-08-29 14:12 评论0 收藏0
Vue中 Class 与 Style 绑定

摘要：与绑定数据绑定一个常见需求是操作元素的列表和它的内联样式。表达式的结果类型除了字符串之外，还可以是对象或数组。绑定对象语法我们可以传给一个对象，以动态地切换上面的语法表示的更新将取决于数据属性是否为真值。 Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性。因此，在 v-bind 用于 class 和 style 时，...

lemanli 2019-08-20 19:05 评论0 收藏0