React中TypeScript推断的IntrinsicAttributes是什么？包含哪些属性？

什么是Intrinsic Attributes？ #

Intrinsic Attributes是React内置的、所有组件（包括自定义组件和原生HTML元素）都能接收的特殊属性集合。这些属性不属于你自定义的props，但React会专门处理它们，TypeScript将这类属性归类到IntrinsicAttributes类型中——这也是你传了组件未声明的props时，会触发类型不匹配错误的原因。

核心Intrinsic Attributes完整列表 #

• key：列表渲染时用于标识元素的唯一性，帮助React精准判断哪些元素需要更新、新增或删除。所有组件都能接收这个属性，TypeScript不会因为传递key而抛出类型错误。
• ref：用于获取组件实例或DOM元素的引用。自定义组件若要接收ref，需要用React.forwardRef包裹，并显式声明ref的类型；原生HTML元素的ref则直接指向对应的DOM节点。
• children：组件的子节点内容。在部分版本的@types/react中，children会被包含在IntrinsicAttributes相关类型里，所以即使自定义组件没显式声明children prop，默认也能传递子节点（不过严格类型检查场景下，建议显式定义children的类型）。

关于你遇到的类型错误 #

当你给自定义组件传递未在props类型中定义的属性（比如<Greet foo="hello" />）时，TypeScript会校验这个属性是否属于IntrinsicAttributes。如果不属于，就会抛出Type '{ foo: string; }' is not assignable to type 'IntrinsicAttributes'的错误——因为这个属性既不是React内置的特殊属性，也不是组件声明要接收的props。

另外要注意：原生HTML元素的IntrinsicAttributes会包含该元素的所有原生属性（比如div的className、id、style等），但自定义组件默认只继承核心的几个Intrinsic Attributes，不会自动包含原生HTML属性。

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