React报错之Cannot find name

2022-08-19 16:29:59 浏览数 (1)

原文链接：https://bobbyhadz.com/blog/react-typescript-cannot-find-name[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

.tsx扩展名

为了在React TypeScript中解决Cannot find name报错，我们需要在使用JSX文件时使用.tsx扩展名，在你的tsconfig.json文件中把jsx设置为react-jsx ，并确保为你的应用程序安装所有必要的@types包。

typescript-react-cannot-find-name.webp

下面是在名为App.ts的文件中发生错误的示例。

代码语言：javascript复制
export default function App() {
  // ⛔️ Cannot find name 'div'.ts(2304)
  return (
    <div>
      <input type="text" id="message" value="Initial value" />
      {/* Cannot find name 'button'.ts(2304) */}
      <button>Click</button>
    </div>
  );
}

上述示例代码的问题在于，我们的文件扩展名为.ts，但是我们在里面却写的JSX代码。

这是不被允许的，因此为了在TS文件中使用JSX，我们必须：

  1. 将文件命名为.tsx扩展名；
  2. 在tsconfig.json中启用jsx选项。

确保编写JSX代码的所有文件拥有.tsx扩展名。

代码语言：javascript复制
// App.tsx

export default function App() {
  return (
    <div>
      <input type="text" id="message" value="Initial value" />
      <button>Click</button>
    </div>
  );
}

如果在更新文件扩展名为.tsx后，问题依然没有解决，请尝试重启IDE和开发服务器。

tsconfig.json配置文件

打开tsconfig.json文件，确保jsx选项设置为react-jsx。

代码语言：javascript复制
{
  "compilerOptions": {
    "jsx": "react-jsx", // 


	


javascript react https 网络安全 typescript 




	






	

 0 人点赞