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'}