REACT报Invalid DOM property `class` 需用className的原因及解决方法

问题原因 #

这个警告是React JSX语法和原生HTML属性的命名规则差异导致的：

• 原生HTML中元素类名通过class属性声明，但class是JavaScript的保留关键字（用于定义ES6类，比如React类组件的写法class MyComponent extends React.Component），无法直接在JSX（本质是JavaScript语法扩展）中作为属性名使用。
• React为了规避关键字冲突，同时统一DOM属性的小驼峰命名规范，将元素类名对应的属性命名为className。只要在JSX代码中给标签写了class属性，React就会抛出该警告，且对应的类名样式通常不会正常生效。

报错截图

修复方法 #

根据触发场景不同，对应修复方式如下：

• 场景1：手写JSX代码时误用class
  直接将JSX标签上所有的class属性替换为className即可。
  错误写法示例：

  // 错误：JSX中使用原生HTML的class属性
  <div class="page-wrapper">
    <button class="primary-btn">提交</button>
  </div>
  

  正确写法示例：

  // 正确：替换为React要求的className属性
  <div className="page-wrapper">
    <button className="primary-btn">提交</button>
  </div>
  

• 场景2：第三方依赖/UI库触发警告
  如果自身业务代码中没有写class属性，警告来自引入的第三方组件，说明当前使用的第三方依赖版本和React版本不兼容，升级对应第三方依赖到适配当前React版本的稳定版，或者将React版本降级到和依赖匹配的版本即可解决。
• 场景3：直接将原生HTML代码作为JSX渲染
  如果是需要渲染外部获取的原生HTML字符串，不要直接把HTML标签写在JSX里，使用React提供的dangerouslySetInnerHTML属性传入HTML字符串即可，这种场景下原生HTML里的class属性不会触发警告。

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