React+TypeScript报错：Property 'stateDropdown'不存在于JSX.IntrinsicElements

报错原因 #

React组件命名规范强制要求组件名必须以大写字母开头。小写开头的标识符会被React解析为HTML原生标签，而stateDropdown并非标准HTML标签，因此TypeScript抛出该类型错误。

解决步骤 #

1. 修改组件导入与使用的名称
   将导入语句和JSX中的stateDropdown改为大写开头的StateDropdown：

   // App.tsx
   import { FC } from 'react';
   import './style.css';
   // 导入时改为大写开头
   import { StateDropdown } from './components/stateDropdown';
   
   export const App: FC<{ name: string }> = ({ name }) => {
     return (
       <div>
         {/* 使用时改为大写开头 */}
         <StateDropdown />
         <h1>Hello {name}!</h1>
         <p>Start editing to see some magic happen :)</p>
       </div>
     );
   };
   

2. 同步修改组件文件的导出名称
   打开stateDropdown.tsx，确保组件定义和导出的名称也为大写开头：

   // stateDropdown.tsx
   import { FC } from 'react';
   import './stateDropdown.css';
   
   // 组件名改为大写开头
   export const StateDropdown: FC = () => {
     // 组件逻辑代码
     return (
       <div>
         {/* 下拉菜单内容 */}
       </div>
     );
   };
   

原理说明 #

React通过组件名的大小写区分原生HTML元素和自定义组件：

• 小写开头的标签会被识别为HTML内置元素（如<div>、<p>）
• 大写开头的标签会被识别为React自定义组件

遵循这个规范即可避免此类TypeScript类型错误。

内容的提问来源于stack exchange，提问作者zi zi