React 要求自定义 JSX 组件名必须采用 PascalCase（如 StateDropdown），否则会被误判为原生 HTML 标签，导致 TypeScript 报错“Property does not exist on type 'JSX.IntrinsicElements'”。

react 要求自定义 jsx 组件名必须采用 pascalcase（如 `statedropdown`），否则会被误判为原生 html 标签，导致 typescript 报错“property does not exist on type 'jsx.intrinsicelements'”。

在 React（尤其是 TypeScript）中，JSX 编译器通过命名规范区分原生 HTML 元素（如

、）和用户定义的组件。根据 JSX 规范：
✅ 所有以 大写字母开头的标签名（PascalCase）被视为自定义组件；
❌ 所有以 小写字母开头的标签名（camelCase 或 kebab-case）均被当作内置 HTML/DOM 元素处理。

因此，当你写 时，TypeScript 会尝试在 JSX.IntrinsicElements 类型定义中查找名为 stateDropdown 的原生元素——但该类型中只包含标准 HTML 标签（如 div, span, input 等），自然抛出错误：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

Property 'stateDropdown' does not exist on type 'JSX.IntrinsicElements'.(2339)

✅ 正确做法：统一使用 PascalCase

1. 重命名组件文件与导出名
   将 stateDropdown.tsx 改为 StateDropdown.tsx，并确保默认或具名导出的组件名也为 StateDropdown：

   // src/components/StateDropdown.tsx
   import { FC } from 'react';
   
   export const StateDropdown: FC = () => {
     return (
       <select><option value="">Select a state</option>
   <option value="CA">California</option>
   <option value="NY">New York</option></select>
     );
   };

2. 更新导入与使用方式
   在 App.tsx 中按 PascalCase 导入并渲染：

   import { FC } from 'react';
   import './style.css';
   import { StateDropdown } from './components/StateDropdown'; // ✅ PascalCase import
   
   export const App: FC = ({ name }) => {
     return (
       <div>
         <statedropdown></statedropdown> {/* ✅ PascalCase usage */}
         <h1>Hello {name}!</h1>
         <p>Start editing to see some magic happen :)</p>
       </div>
     );
   };

⚠️ 注意事项

• 即使使用 import * as Dropdown from './StateDropdown'，渲染时仍须用 （保持 PascalCase）；
• 不要混用命名风格：const stateDropdown = () => ... + 是无效且报错的；
• React 官方文档明确要求：“Always start component names with a capital letter”（React Docs: Components and Props）；
• ESLint 插件（如 eslint-plugin-react）通常启用 react/jsx-pascal-case 规则，可提前捕获此类问题。

遵循 PascalCase 命名约定，不仅是解决当前报错的关键，更是保证代码可维护性、兼容工具链（TypeScript、ESLint、Prettier）及团队协作一致性的基础实践。