在 React 应用程序中切换到 TypeScript 的问题

Posted 2023-03-13

【中文标题】在 React 应用程序中切换到 TypeScript 的问题

【英文标题】：Problems in switching to TypeScript in React application

【发布时间】：2019-06-04 09:27:12

【问题描述】：

我需要将我的 React 应用组件切换到 Typescript。

我安装了 TS 包并创建了一个 tsconfig.json 文件，react-app-env.d.ts 文件。我还将扩展名从 .js 更改为 .tsx。但是在其中一个组件中我有一个错误。例如：在<div>

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

类型'孩子：元素[];类：字符串； ' 不可分配给 输入'DetailedhtmlProps, HTMLDivElement>'。类型上不存在属性“类” '详细的HTMLProps, HTMLDivElement>'.ts(2322)

【问题讨论】：

应该是className="main-div" 而不是class

它从字面上告诉你问题是什么Property 'class' does not exist

但我对标签也有同样的问题。 Запам'ятати

在 JSX 模板中使用 htmlFor 而不是 for。

【参考方案1】：

问题是某些 HTML 属性也是 javascript 中的保留字，所以为了避免问题，JSX 语法使用与纯 HTML 略有不同的属性。

您遇到的主要两个问题是：

class 现在是 className for 现在是 htmlFor

所以你的问题是：

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

您在评论中发布的标签是：

<label htmlFor="remember-me" className="remember">
    <span>Запам'ятати</span>
    <span><input id="remember-me" name="remember-me" type="checkbox"/></span> 
</label>

【参考方案2】：

您缺少一个结束</div>，并且该属性不是class，而是className

【讨论】：

谢谢。但我对标签有同样的问题。 <label for="remember-me" className="remember"> <span>Запам'ятати</span> <span><input id="remember-me" name="remember-me" type="checkbox"/></span> </label>

【参考方案3】：

哟！

将class 更改为className！

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