【React】类型“JSX.IntrinsicElements”上不存在属性“...” （TS报错）

最新推荐文章于 2024-10-23 17:04:00 发布

一颗不甘坠落的流星

最新推荐文章于 2024-10-23 17:04:00 发布

阅读量7.6k

点赞数 2

分类专栏：编码报错及解决方法文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_45677671/article/details/131083775

版权

编码报错及解决方法专栏收录该内容

24 篇文章

订阅专栏

文章介绍了在React开发中遇到的组件命名错误，当在父组件中使用小写命名的子组件时，TS会抛出错误。解决方法是遵循JSX的命名规则，确保组件名称首字母大写，如将`child`改为`Child`，这样可以避免报错并正确渲染组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 报错示例
- 解决方法

报错示例

示例图片：

在这里插入图片描述

演示代码：

const child = () => {
    return <div> 我是子组件 </div>
}

const APP =()=>{
    return(<div >
    		<span>在父组件中使用子组件：</span>
           	<child /> // 这时候 ts 就会抛错
    </div>)
}

解决方法

内部组件不能用小写命名，开头必须是大写，所以改成大写就行

const Child = () => {
    return <div> 我是子组件 </div>
}

const APP =()=>{
    return(<div >
    		<span>在父组件中使用子组件：</span>
           	<Child />
    </div>)
}