React自定义组件addMore导入后编译器无法识别，求排查解决

你的问题出在React组件命名规则上——React要求自定义组件的名称必须以大写字母开头，小写开头的标签会被React当作原生HTML元素解析，所以编译器无法识别你的addMore组件。

解决步骤如下：

1. 修改addMore组件的名称 #

将组件函数名改为大写开头的AddMore，确保导出的组件名称符合规范：

import React from 'react'

// 函数名改为大写开头
export default function AddMore() {
  return (
    <div className="btn-group">
        <button type="button" className="btn btn-primary">+</button>
        <button type="button" className="btn btn-primary">-</button>
    </div>
  )
}

2. 修正ShoppingCardItem中的导入与使用 #

同步修改导入语句和组件调用的名称，统一使用大写开头的AddMore：

import React from 'react'
import { MdDeleteForever } from 'react-icons/md'
// 导入名称改为AddMore
import AddMore from '../addMore/addMore'
import './ShoppingCardItem.css'

export default function ShoppingCardItem() {
  return (
    <div className='shoppingCardItem-Container'>
        <img src="./img/Apfel.jpg" alt="" />
        <p>2x Apfel</p>
        {/* 使用大写开头的组件标签 */}
        <AddMore />
        <MdDeleteForever />
    </div>
  )
}

完成以上修改后，编译器就能正确识别你的自定义组件了。

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