迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

React 中 Property does not exist on type 'JSX.IntrinsicElements' 错误

作者:迹忆客 最近更新:2022/04/29 浏览次数:

当组件的名称以小写字母开头时,会出现错误“Property does not exist on type 'JSX.IntrinsicElements”。 要解决该错误,需要确保始终以大写字母开头组件名称,安装 React 类型并重新启动我们的开发服务器。

下面是错误发生方式的示例。

// 名称以小写字母开头
function myComponent() {
  return <h1>Hello world</h1>;
}

function App() {
  return (
    <div>
      {/* ⛔️ Property does not exist on type 'JSX.IntrinsicElements'. */}
      <myComponent />
    </div>
  );
}

export default App;

上面代码示例中的问题是 myComponent 以小写字母开头。

要解决此错误,需要确保所有组件名称都以大写字母开头。

function MyComponent() {
  return <h1>Hello world</h1>;
}

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

React 使用这种命名约定来区分内置元素,如 pdivspan 和我们定义的自定义组件。

如果错误未解决,重新启动 IDE 和开发服务器。

如果这没有帮助,请确保安装了 react 的类型。 在项目的根目录(package.json 文件所在的位置)中打开终端并运行以下命令。

# 使用 NPM
$ npm install --save-dev @types/react @types/react-dom

# ----------------------------------------------

# 使用 YARN
$ yarn add @types/react @types/react-dom --dev

如果错误未解决,请尝试删除 node_modules 和 package-lock.json(不是 package.json)文件,重新运行 npm install 并重新启动 IDE。

# 👇️ 删除 node_modules 和 package-lock.json
$ rm -rf node_modules
$ rm -f package-lock.json

# 👇️ 清除 npm 缓存
$ npm cache clean --force

$ npm install

如果错误仍然存在,请确保重新启动你的 IDE 和开发服务器。 VSCode 经常出现故障,有时重启可以解决问题。

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便