為什麼編譯器不能讀取從'../addMore/addMore'導入的addMore？

Question

我想要新增一個元件 'addMore'，但是編譯器不識別它。我漏掉了什麼？請幫忙。

import React from 'react'
import { MdDeleteForever } from 'react-icons/md'
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>
  )
}

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>
  )
}

Answer 1

元件名稱必須以大寫字母開頭。將檔案名稱addMore.jsx重新命名為AddMore.jsx，並且也要變更匯入路徑。查看此資訊請造訪React.dev功能元件

// ShoppingCardItem.jsx

import React from 'react'
import { MdDeleteForever } from 'react-icons/md'
import AddMorefrom '../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>
  )
}

// AddMore.jsx

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>
  )
}