tsx 引入的子组件必须大写开头命名

在 TSX 或 JSX 中，组件名必须以大写字母开头。这是 JSX 的语法规则之一，也是 React 和 Vue 3 TSX 写法中的一条重要约定。

---

原因：区分 HTML 标签和自定义组件

在 JSX/TSX 中，小写字母开头的标签会被解析为 HTML 元素（如 <div>、<span> 等），而大写字母开头的标签会被解析为 自定义组件。

示例：

// 小写字母开头：被视为 HTML 标签
<div /> // 解析为 HTML 的 <div> 元素

// 大写字母开头：被视为自定义组件
<MyComponent /> // 解析为名为 MyComponent 的组件

如果组件名以小写字母开头，JSX 会将其视为普通的 HTML 标签，从而导致错误或无法正确渲染。

---

正确的写法

确保组件名始终以大写字母开头。

示例：

// 正确：组件名以大写字母开头
function MyComponent() {
  return <div>Hello, World!</div>;
}

// 使用时
<MyComponent />

错误示例：

// 错误：组件名以小写字母开头
function myComponent() {
  return <div>Hello, World!</div>;
}

// 使用时会报错，因为 JSX 会将其解析为 HTML 标签
<myComponent /> // 报错：Unknown DOM element "myComponent"

---

为什么需要这样约定？

1. 避免歧义：JSX 需要一种方式来区分 HTML 标签和自定义组件。通过约定组件名以大写字母开头，可以明确标识这是一个自定义组件。
2. 符合惯例：React 和 Vue 的生态系统中，开发者普遍遵循这一约定，有助于代码的可读性和一致性。

---

如何修复小写字母开头的组件名问题？

如果你不小心定义了一个小写字母开头的组件名，可以通过以下方式修复：

示例：

// 错误：小写字母开头
function myComponent() {
  return <div>Hello, World!</div>;
}

// 修复：改为大写字母开头
function MyComponent() {
  return <div>Hello, World!</div>;
}

// 使用时
<MyComponent />

---

总结

• 在 TSX/JSX 中，组件名必须以大写字母开头，否则会被解析为 HTML 标签。
• 这是为了避免歧义，并符合 React 和 Vue 的生态惯例。
• 如果遇到相关问题，请检查组件名是否符合命名规范，并确保以大写字母开头。