React的JSX 标签命名规则

JSX 标签命名规则

对函数式组件和类式组件中标签进行说明

1. HTML 原生标签

• 必须使用小写字母

// ✅ 正确
<div>
<span>
<button>
<input>

// ❌ 错误
<Div>
<SPAN>
<Button>

2. 自定义组件

• 必须以大写字母开头
• 通常使用 PascalCase 命名法

// ✅ 正确
function UserProfile() {
    return <div>用户信息</div>;
}

const ButtonGroup = () => {
    return <div>按钮组</div>;
};

// 使用组件
<UserProfile />
<ButtonGroup />

// ❌ 错误
function userProfile() {  // 小写开头
    return <div>用户信息</div>;
}

<userProfile />  // React 会把它当作 HTML 标签

3. 为什么要这样规定？

1. 区分的目的

   • React 通过首字母大小写来区分是 HTML 标签还是自定义组件
   • 小写字母：React 会在 HTML 标签库中查找
   • 大写字母：React 会在组件定义中查找

2. 避免冲突

   • 防止与未来可能新增的 HTML 标签冲突
   • 保持代码的清晰度和可读性

3. 约定俗成

   • 符合 JavaScript 类的命名惯例
   • 与其他框架的组件命名规范一致

这个规则是 React 中非常基础和重要的规则，它帮助 React 正确地识别和渲染不同类型的标签！