React组件迁移TypeScript后class属性类型错误求助

嘿，这个问题我太熟悉了！你碰到的是React JSX和TypeScript类型检查的一个常见小坑——在React的JSX语法里，咱们不能直接使用HTML原生的class属性，必须换成className才行。

问题根源 #

class是JavaScript的保留关键字（用来定义类），React为了避开这个语法冲突，把HTML元素的class属性映射成了className。而TypeScript对JSX的类型校验非常严格，它清楚React DOM元素的props中并没有class这个属性，所以直接抛出了类型不匹配的错误。

修复方案 #

把代码里所有的class替换成className就可以解决这个问题，修改后的代码如下：

<div>
  <div className="main-div">
    <div className="panel">
      <h2>Вхід</h2>
    </div>
  </div>
</div>

额外提醒 #

类似的属性映射还有：HTML里的for属性（用于label标签），在React JSX里要写成htmlFor，也是同样的关键字冲突原因。以后遇到这类属性相关的类型错误，都可以先排查是不是这个问题~

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