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

作者：羽徵

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

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

绑定 HTML Class

#对象语法

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

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

错误例子：

render(){
    return <div className={ 'box-color'：this.state.isError }>hello world</div>
}
复制代码

可以实现的语法如下：

1、使用逻辑运算符

css文件

.box-color {
    color：red;
}
复制代码

js文件