React 注意事项

Inline Style 内联样式

内联样式有一些简写操作

比如:

<div style={{height: 10}}></div>

转化为

<div style="height: 10px"></div>

---

在jsx中会自动加上px单位。但需要注意的是, 并不是每种属性都会自动加上单位的。容易出问题的比如lineHeight

这里有一个列表，以下属性不会自动加上px

• animationIterationCount
• boxFlex
• boxFlexGroup
• boxOrdinalGroup
• columnCount
• fillOpacity
• flex
• flexGrow
• flexPositive
• flexShrink
• flexNegative
• flexOrder
• fontWeight
• lineClamp
• lineHeight
• opacity
• order
• orphans
• stopOpacity
• strokeDashoffset
• strokeOpacity
• strokeWidth
• tabSize
• widows
• zIndex
• zoom

参考文章: Shorthand for Specifying Pixel Values in style props