其他分享
首页 > 其他分享> > 2022-06-24 react style和className的动态赋值

2022-06-24 react style和className的动态赋值

作者:互联网

前言:在开发中常常遇到需要一个元素控制多个样式的业务,如果用的是vue框架,直接:style或者:class即可,而react的写法则相对晦涩,较前者复杂,例子如下:

// style
// 静态写法
style={{ display: none }}
// 动态写法 单个样式 给判断条件this.state.current == 0套一个括号
style={{ display: (this.state.current == 0) ? '' : 'none' }}
// 动态写法 多个样式 
style={{ margin: '16px', display: (this.state.current = 1) ? '' : 'none' }}
// 由此可见,style的动态写法就是需要给判断条件套上个括号即可。
// className
// 静态写法
className="suffix"
// 动态写法 直接套个花括号写判断条件
className={item.flag == 1 ? 'suffix' : 'suffix active'}

 

标签:24,current,style,suffix,className,state,写法
来源: https://www.cnblogs.com/iuniko/p/16409009.html