React 中组件名必须以大写字母开头，否则会被当作 HTML 原生标签处理（如 ），导致自定义组件无法识别和渲染，页面空白但无报错。
react 中组件名必须以大写字母开头，否则会被当作 html 原生标签处理（如 `
在 React 开发中，一个看似微小却极易被忽视的命名约定，常常成为新手卡壳的“隐形陷阱”：自定义组件名必须首字母大写。这是 JSX 的核心解析规则——当 React 遇到 <home></home> 这样的标签时，会将其视为原生 HTML 元素（类似 <span></span> 或 <custom-tag></custom-tag>），而浏览器标准中并不存在 <home></home> 标签，因此该标签被忽略，组件逻辑完全不执行，最终渲染为空白内容。
你的代码中存在两处关键问题：
-
导入语句大小写不匹配：
import home from "./pages/home/home"; // ❌ 小写变量名
即使文件路径正确，
home作为导入变量名虽合法，但它违背了 React 社区约定，也容易混淆组件身份。 -
JSX 中使用小写标签：
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
return (<home/>); // ❌ 被解析为 HTML 自定义元素，非 React 组件
✅ 正确做法是：统一使用 PascalCase（大驼峰）命名组件及其导入名：
// App.js
import Home from "./pages/home/home"; // ✅ 首字母大写导入
function App() {
return <Home />; // ✅ JSX 中必须大写
}
export default App;同时，请确保 ./pages/home/home.js 文件中导出的组件名也符合规范：
// ./pages/home/home.js
export default function Home() { // ✅ 组件名 Home 首字母大写
return <h1>Welcome to the Home Page!</h1>;
}⚠️ 注意事项：
- 不要写成
import { home } from ...或import * as home from ...—— 默认导出应直接用大写变量接收； - 类组件同理：
class Home extends Component { ... }，且需export default Home； - 内置 HTML 标签（如
<div>、<code><button></button>）永远小写；自定义组件永远大写——这是 JSX 解析器的硬性区分机制； - 重启开发服务器（如
npm start）后务必刷新浏览器，避免 HMR 缓存干扰。
总结：React 不报错 ≠ 代码正确。空白屏幕常源于 JSX 解析失败，而首字母大小写正是最常见元凶。养成 PascalCase 命名习惯，既是规范，更是避坑刚需。
