TypeScript React中JSX可用大写Tag而非小写tag的语法解析

先澄清变量本质 #

Tag 根本不是类型，它就是对象解构语法生成的普通局部变量。
写法{ tag: Tag }的逻辑非常直白：从传入的props对象里取出tag键对应的属性值，把这个值赋值给名为Tag的局部常量，整个过程和类型推导、类型定义没有任何关联。根据Props的类型标注，这个变量存的是React.ElementType类型的值——既可以是'div'这类原生DOM标签的字符串名，也可以是自定义的React组件函数。

大小写差异的核心逻辑 #

你观察到的<tag>失效、<Tag>生效的差异，完全来自JSX解析器的固定识别规则：

• 所有小写开头的JSX标签，会被解析器直接判定为HTML原生内置标签，不会去当前作用域查找同名变量。比如写<tag />时，解析器会直接尝试渲染HTML本身就存在的<tag>语义元素，完全不会读取你props里tag参数存的实际渲染目标。
• 所有大写开头的JSX标签，会被解析器判定为需要引用作用域变量的动态渲染目标。比如写<Tag />时，解析器会从当前作用域找到Tag变量，取出它存的实际值（可能是'div'，可能是某个自定义组件）来渲染，这就是你看到的“能正常生效”的原因。

常见认知误区 #

不存在“大写开头就代表类型”的判定逻辑，大写标记的唯一作用，是帮JSX解析器区分「内置原生标签」和「动态引用的渲染目标」：

• 你完全可以把解构后的变量改成任意大写开头的名字，比如tag: DynamicNode，写<DynamicNode />一样可以正常渲染
• 如果你把解构后的变量改成小写开头的名字，比如tag: myNode，哪怕你明确写了<myNode />，JSX也会把它当成原生DOM标签，根本不会读取你存的变量值

举个简单的验证例子：

const myTag = 'span';
// 以下写法不会读取上面的myTag变量，会尝试渲染一个不存在的原生<mytag>元素
const invalid = <myTag />;
// 以下写法会正确读取变量值，渲染出对应的<span>元素
const valid = <MyTag />;

内容的提问来源于stack exchange，提问作者Jarod