React应用：App.js无法识别cartPage组件，改名后恢复正常

问题背景 #

定义了cartPage函数组件，VS Code的代码片段能识别它，但项目里始终无法正常使用。将函数名改为大写开头的CartPage后，问题直接解决。

问题根源 #

React有个核心约定：自定义组件必须以大写字母开头。如果用小写开头的名字（比如<cartPage />），React会把它当成原生HTML标签处理，根本不会当作你写的自定义组件渲染，自然就识别不了。

修正后的完整代码 #

购物车组件文件（建议重命名为CartPage.jsx） #

import React from 'react'
import DefaultLayout from '../components/DefaultLayout'
import { useSelector } from 'react-redux'
import { Table } from 'antd'

// 组件名改为大写开头
function CartPage() {
  const { cartItems } = useSelector((state) => state.rootReducer)

  const columns = [
    { title: 'Name', dataIndex: 'name' },
    {
      title: 'Image',
      dataIndex: 'image',
      render: (image, record) => {
        // 原代码缺少return，补充后图片才能正常渲染
        return <img src={image} alt='' height='60' width='60' />
      },
    },
    { title: 'Price', dataIndex: 'price' },
  ]

  return (
    <div>
      <DefaultLayout>
        <h3>Cart Summary</h3>
        <Table columns={columns} dataSource={cartItems} />
      </DefaultLayout>
    </div>
  )
}

export default CartPage

App.js中的路由配置 #

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Homepage from './pages/Homepage'
import Items from './pages/Items'
// 导入时对应大写组件名
import CartPage from './pages/CartPage'

function App() {
  return (
    <div className='App'>
      <BrowserRouter>
        <Routes>
          <Route path='/home' element={<Homepage />} />
          <Route path='/items' element={<Items />} />
          {/* 使用大写开头的组件标签 */}
          <Route path='/cart' element={<CartPage />} />
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

额外注意点 #

• 组件文件名最好和组件名保持一致（比如CartPage.jsx），方便团队协作和后期维护。
• 原代码里Image列的render函数没写return，这也会导致图片不显示，修正代码里已经补上了。

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