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

本文摘自PHP中文网，作者不言，侵删。

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

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

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

绑定 HTML Class

对象语法

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

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

错误例子：

render(){
  return <p className={ 'box-color'：this.state.isError }>hello world</p>
}

可以实现的语法如下：

1、使用逻辑运算符

css文件

.box-color {
  color：red;
}

js文件

render(){
  return <p className={ this.state.isError && 'box-color' }>hello world</p>
}

2、使用三元运算符

css文件

.box-show {
  display: block;
}
 
.box-hide {
  display: none;
}

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

3、使用函数

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

js文件

getIsError() {
  return this.state.isError ? 'box-color' : '';
}
 
render(){
  return <p className={ this.getIsError() }>hello world</p>
}

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

const classObj = {
  'box-show': this.state.isShow,
  'box-color': this.state.isError
}
 
render(){
  return <p className={ classObj }>hello world</p>
}