React内联样式中数值型CSS规则值是否需要添加引号？

一句话结论 #

带单位的样式值（比如50%、12px）必须用引号包成字符串；纯数字且默认单位是px的（比如200、1.5）可以直接写数值，React会自动补全px单位。

实际写法示例 #

正确写法 #

// 带%单位，必须用字符串形式
<div style={{ width: '50%' }}>正确示例</div>

// 纯数字，React自动补px，等价于width: '200px'
<div style={{ width: 200, lineHeight: 1.5 }}>正确示例</div>

错误写法（会触发语法报错） #

// 50%在JS中不是合法数值，直接写会报错
<div style={{ width: 50% }}>错误示例</div>

背后的原因 #

React的内联样式本质是一个JavaScript对象，对象的属性值必须是合法的JS数据类型。50%这种带单位的写法在JS里既不是数字，也不是合法表达式，只有把它转为字符串'50%'，才能符合JS对象的取值规则，让React正确解析。

而纯数字的情况，React内部做了适配处理，会自动给这类值加上默认的px单位，所以直接写数值即可。

内容的提问来源于stack exchange，提问作者Nora McDougall-Collins