為什麼編譯器不能讀取從'../addMore/addMore'導入的addMore？
P粉463824410
2023-08-17 15:20:19
<p>我想要新增一個元件 'addMore'，但是編譯器不識別它。我漏掉了什麼？請幫忙。 </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">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>
)
}</pre>
<p><br /></p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">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>
)
}</pre>
<p><br /></p>
元件名稱必須以
大寫字母開頭。將檔案名稱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> ) }