为什么React的style属性不能使用普通字符串，而必须是对象？

你给出的代码报错的直接原因 #

React 明确规定原生元素的 style 属性仅接受 JavaScript 对象作为值，你传入 CSS 字符串的写法不符合 API 要求，运行时自然会抛出类型错误。

为什么 React 不效仿普通 HTML 支持字符串格式的 style #

这个设计是刻意为之，核心原因有几个：

• 安全层面：字符串格式的样式很容易被注入恶意代码，触发 XSS 漏洞。对象格式的样式会被 React 做序列化校验，从根源上避免了这类注入风险。
• 语法适配层面：JSX 是 JavaScript 的语法扩展，所有属性默认都遵循 JS 语法规则，样式用对象格式更贴合 JS 的使用习惯，动态修改样式的时候也更方便，不用做复杂的字符串拼接，直接修改对象属性即可。
• 性能与兼容性层面：React 操作 DOM 样式的时候，是直接调用 DOM 元素的 HTMLElement.style API 赋值，没有走浏览器解析 style 字符串的流程。直接要求传入对象省略了字符串解析的步骤，既降低了性能开销，也规避了不同浏览器对 CSS 字符串解析的兼容性差异。
• 命名一致性层面：对象格式的样式使用小驼峰命名（比如 backgroundColor 对应 CSS 里的 background-color），和 DOM 原生 style API 的属性命名完全对齐，不会出现命名混淆的问题。

至于其他普通 HTML 属性（比如 id、name）可以直接传字符串，是因为这类属性的值本身就是简单的平面字符串，没有结构化的规则，也几乎没有注入风险，不需要做额外的格式校验。

内容的提问来源于stack exchange，提问作者Ahmad