“JSX.IntrinsicElements”类型上不存在属性

类型 ‘JSX.IntrinsicElements’ 上不存在属性

Property does not exist on type ‘JSX.IntrinsicElements’

当组件名称以小写字母开头时，会出现错误“属性不存在于类型‘JSX.IntrinsicElements’上”。

要解决该错误，请确保组件名称始终以大写字母开头，安装 React 的类型并重新启动开发服务器。

jsx 内在元素类型上不存在属性

壳


Warning: <myComponent /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

下面是错误如何发生的示例。

应用程序.tsx


// 👇️ name starts with lowercase letter
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小写字母开头的。

所有组件名称必须以大写字母开头

要解决该错误，请确保所有组件名称均以大写字母开头。

应用程序.tsx


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

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

export default App;

React 使用此命名约定来区分内置元素（如p、div）span和我们定义的自定义组件。

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

安装 react 和 react-dom 的类型

如果这没有帮助，请确保您已安装 typings react。在项目的根目录（package.json
文件所在的位置）中打开终端并运行以下命令。

壳


# 👇️ with NPM
npm install --save-dev @types/react @types/react-dom

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

# 👇️ with YARN
yarn add @types/react @types/react-dom --dev

删除您的 node_modules 并重新安装您的依赖项

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

bash如果您使用的是 macOS 或 Linux，请在或中发出以下命令zsh。

壳


#  for macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

如果您使用的是 Windows，请在 CMD 中发出以下命令。

命令


# for Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

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

如果您收到错误
JSX element implicitly has type ‘any’ because no interface ‘JSX.IntrinsicElements’ exists，请单击链接并按照说明进行操作。