html5动态切换class,React-JSX中如何实现Class与Style的动态绑定（附实例）

本篇文章给大家带来的内容是关于React-JSX中如何实现Class与Style的动态绑定(附实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

摘要：操作元素的 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(){

re