React.js与Ant Design渲染子组件时出现‘Element type is invalid’错误

云原生阿岚

2026-7-11

React + Ant Design 出现“Element type is invalid”错误的排查与解决

核心错误原因：使用了Ant Design不存在的`Grid`组件

Ant Design v4及后续版本已移除了Grid组件，布局体系直接通过Row和Col实现，不需要外层包裹Grid。你在Categories组件中导入并使用了<Grid>标签，React无法识别这个无效的组件类型，因此抛出"Element type is invalid"错误。

其他需排查的常见原因

组件导入路径错误：确认Categories.js及其他子组件（Announcement/NavigationBar等）的导入路径拼写正确，文件实际存在于对应目录
导出/导入不匹配：若组件使用export default导出，导入时不能加花括号；若为命名导出则必须用花括号包裹（你的代码中Categories的导出导入是正确的，但需检查其他组件）
依赖文件导出问题：categoriesData.js若导出方式错误也可能引发问题，但当前代码未使用该变量，暂不影响

修正后的`Categories`组件代码

import React from "react"
import { Card, Row, Col } from "antd"
import "../projectStyling/Categories.css"

function Categories() {
    return (
        <Row className="GridStyling">
            <Col span={8}>
                <Card cover={<img src='https://m.media-amazon.com/images/I/61uxHDdgfxL._UL1440_.jpg' alt='formal '/>}/>
            </Col>
            <Col span={8}>
                <Card cover={<img src='https://m.media-amazon.com/images/I/61uxHDdgfxL._UL1440_.jpg' alt='formal '/>}/>
            </Col>
            <Col span={8}>
                <Card cover={<img src='https://m.media-amazon.com/images/I/61uxHDdgfxL._UL1440_.jpg' alt='formal '/>}/>
            </Col>
        </Row>
    )
}

export default Categories;