为何在React中需使用驼峰式命名HTML属性？以video标签为例

1. JSX是JavaScript语法糖，需遵循JS语法规则 #

JSX最终会被编译为JavaScript对象，而JavaScript里的标识符（变量、属性名）不允许包含连字符，同时驼峰命名是JS社区的通用编码惯例。React将HTML中的多词属性（如原生的autoplay、playsinline）转换为驼峰式（autoPlay、playsInline），本质是让JSX完全契合JS的语法逻辑，避免编译时出现歧义或错误。

举个例子，你写的<video autoPlay>会被编译成：

React.createElement('video', { autoPlay: true })

这里的autoPlay是合法的JS对象属性名；如果写成autoplay，虽然JS本身能识别，但React统一了所有多词属性的命名规则，和事件处理属性（如onClick、onMouseOver）保持一致，降低代码的记忆成本。

2. 规避JavaScript关键字冲突 #

部分HTML属性名与JavaScript的关键字/保留字重合，必须进行改名适配：比如HTML的class属性在React中要写成className（因为class是JS定义类的关键字），for属性要写成htmlFor（因为for是JS的循环关键字）。这种场景下，驼峰命名自然成为了统一的解决方案。

关于VSCode的警告 #

这不是错误，而是React官方规范的提示。如果你安装了ESLint的React插件（如eslint-plugin-react），它会检查JSX代码是否符合React的编码规范，提醒你将autoplay改为autoPlay。这类警告是为了让代码遵循社区最佳实践，保证跨项目的一致性，避免潜在的兼容性问题。

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