React 要求自定义组件名必须以大写字母开头，否则 JSX 会将其识别为原生 HTML 标签（如 ），而 并非合法 HTML 元素，导致组件被忽略、页面空白且无报错。

react 要求自定义组件名必须以大写字母开头，否则 jsx 会将其识别为原生 html 标签（如 `

`），而 `` 并非合法 html 元素，导致组件被忽略、页面空白且无报错。

在 React 中，JSX 对大小写极为敏感——这是初学者最容易踩坑的关键规则之一。当你写 <home></home> 时，React 编译器会认为这是一个类似 <span></span> 或 <section></section> 的内置 HTML 标签，而非你定义的 React 组件。由于浏览器中不存在 <home></home> 这个标准 HTML 元素，该标签会被静默忽略，最终渲染结果为空白，且控制台不会抛出错误（因为语法本身合法）。

✅ 正确做法是：始终使用 PascalCase（首字母大写）命名自定义组件，并确保 import 和 JSX 中的引用名完全一致。

以你的代码为例，修正步骤如下：

1. 重命名组件文件与导出函数名（推荐）
   将 ./pages/home/home.js 中的组件定义改为：

   // ./pages/home/home.js
   import React from 'react';
   
   function Home() {
     return <h1>Welcome to the Home Page!</h1>;
   }
   
   export default Home;

2. 更新 App.js 中的导入与使用方式

   

   Reactivation Specialist · 流失召回

   适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p

   下载

   // App.js
   import Home from './pages/home/home'; // ✅ 首字母大写，匹配导出
   
   function App() {
     return <Home />; // ✅ JSX 标签首字母大写
   }
   
   export default App;

⚠️ 注意事项：

• import home from ... 是错误的：小写 home 违反命名约定，且与组件实际名称不匹配；
• 不要写 import { home } from ... 或 import * as home from ... —— 默认导出应直接用 import Home from ...；
• 如果使用命名导出（如 export const Home = () => ...），则需 import { Home } from ...，但依然要求 JSX 中为 <home></home>；
• <home></home> 中的 H 大写是强制性语法约定，不是风格偏好。

? 小技巧：在 VS Code 中启用 ESLint + eslint-plugin-react，它会实时提示 “Component name should always start with a capital letter”。

总结：React 通过首字母大小写区分原生 HTML 元素与自定义组件。牢记 “小写是 DOM 标签，大写是 React 组件” 这一原则，可避免 80% 的空白页问题。修正命名后，重新保存文件，Vite/webpack 会自动热更新，组件即可正常渲染。