Warum kann der Compiler addMore nicht lesen, das aus „../addMore/addMore“ importiert wurde?

Question

Ich möchte eine Komponente „addMore“ hinzufügen, aber der Compiler erkennt sie nicht. Was habe ich verpasst? Bitte helfen Sie.

import React from 'react'
importiere { MdDeleteForever } aus 'react-icons/md'
addMore aus '../addMore/addMore' importieren
import './ShoppingCardItem.css'


Standardfunktion ShoppingCardItem() exportieren

  zurückkehren (
    <div className='shoppingCardItem-Container'>
        <img src="./img/Apfel.jpg" alt="" />
        <p>2x Apfel</p>
        <addMore />
        <MdDeleteForever />
        
    </div>
  )
}

import React from 'react'

Standardfunktion exportieren addMore() {
  zurückkehren (
    <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>
  )
}