关于react.js:React报错之Property-does-not-exist-on-type-JSXIntrinsicElements

注释从这开始~

总览

当组件名称以小写字母结尾时，会导致 ”Property does not exist on type ‘JSX.IntrinsicElements'” 谬误。为了解决该谬误，确保组件名称总是以大写字母结尾，装置 React 申明文件并重启你的开发服务器。

这里有个示例用来展现谬误是如何产生的。

// App.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是以小写字母结尾的。

组件大写

为了解决该问题，请确保所有的组件名称均以大写字母结尾。

// App.tsx

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

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

export default App;

React 应用这种命名常规来辨别 p、div、span 等内置元素和咱们定义的自定义组件。

如果谬误仍未解决，尝试重启 IDE 和开发服务器。

类型申明

如果那都没有帮忙，确保装置了 react 的类型申明文件。在我的项目的根目录下关上终端，并运行上面的命令：

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

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

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

如果谬误仍未解决，尝试删除 node_modules 以及 package-lock.json（不是package.json）文件，从新运行npm install 并重启 IDE。

# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

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

npm install

如果谬误依然存在，请确保重新启动你的 IDE 和开发服务器。VSCode 经常出现故障，重启有时会解决一些问题。

总结

导致该问题的起因是因为自定义组件没有以大写字母结尾，因为 React 是通过这种形式来辨别内置元素和自定义组件。