React JS中无法访问自定义组件问题排查求助

核心问题：React组件命名规范 #

React要求自定义组件名称必须首字母大写，小写开头的标签会被React识别为原生HTML元素，因此你的<cardComp />不会被当作自定义组件渲染，编辑器也就判定你导入的cardComp未被实际使用。

具体修改步骤 #

1. 修正自定义组件的命名 #

将组件类名改为首字母大写的CardComp，同步更新导出语句：

import React, { Component } from 'react'

// 组件名首字母大写
export class CardComp extends Component {
    render() {
        return (
            <div>
                <h1>My Custom Component</h1>
            </div>
        )
    }
}

export default CardComp

2. 更新导入与组件调用代码 #

调整导入语句和组件使用的名称，保持与组件定义一致：

import React from 'react'

// 使用默认导入更简洁，对应修改后的组件默认导出
import CardComp from 'src/components/cardComp'

const Daily = () => {
 return (
        <>
           <div><CardComp /></div>
        </>
    )
}

export default Daily

补充：若使用命名导入 #

如果要保留命名导入方式，需确保导入名称与组件的命名导出完全匹配（包括大小写）：

// 命名导入时名称要和组件类名一致
import { CardComp } from 'src/components/cardComp'

修改完成后，组件即可正常渲染，编辑器的“已声明但未使用”提示也会消失。

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