在 react 中，组件名必须以大写字母开头，否则 jsx 会将其识别为 html 原生标签而非自定义组件，导致“声明但未使用”警告或渲染失败。
在 react 中，组件名必须以大写字母开头，否则 jsx 会将其识别为 html 原生标签而非自定义组件，导致“声明但未使用”警告或渲染失败。
React 的 JSX 语法在编译时会对标签名进行语义区分：
✅ 首字母大写的标签（如
❌ 首字母小写的标签（如
或 ），React 会直接委托给 DOM 解析——而浏览器中并不存在 这个合法 HTML 标签，因此组件函数根本不会被执行，ESLint 或 TypeScript 也会报出 declared but never read（已声明但从未被读取）的警告。
正确做法：严格遵循 PascalCase（大驼峰）命名规范
你的原始代码问题在于：
- 组件文件导出的是 function generalInput(...)（小写开头）；
- JSX 中使用
（小写标签）； - 导致 React 忽略该组件定义，仅将其视为未知 HTML 标签。
✅ 修正后代码如下：
./generalInput.jsx
export default function GeneralInput({ name }) {
return (
<>
<label>{name}:</label>
<input type="text" />
</>
);
}App.jsx
import GeneralInput from "./generalInput";
import "./styles.css";
export default function App() {
return (
<>
<GeneralInput name="John" />
</>
);
}? 关键修改点说明：
- 组件函数名改为 GeneralInput（首字母大写）；
- 导入语句同步更新为 import GeneralInput from "./generalInput"；
- 推荐使用解构参数 { name } 而非单个参数 name，因为 React 传入的是 props 对象（即 props = { name: "John" }），直接接收 name 会导致 name 变成整个 props 对象，引发渲染错误（当前示例中虽能“侥幸”显示，但逻辑不健壮）；
- 标签名
与函数名严格一致，确保 JSX 正确解析。
补充注意事项
- ✅ 文件名无需强制大写（generalInput.jsx 合法），但组件名必须 PascalCase；
- ✅ 若使用命名导出（export const GeneralInput = ...），导入时仍需保持大写引用；
- ❌ 避免 import generalInput from ... +
的组合——即使函数名大写，导入别名小写也不会触发警告，但 JSX 标签仍需大写才能被识别为组件； - ?️ ESLint 插件（如 eslint-plugin-react）通常启用 react/jsx-pascal-case 规则，可自动检测并提示此类命名错误。
遵循这一基础规范，是避免“组件不渲染”“函数未执行”“声明未使用”等低级却棘手问题的第一道防线。React 的约定大于配置哲学，正是从这类细节开始体现的。
