Pourquoi le compilateur ne peut-il pas lire addMore importé de « ../addMore/addMore » ?

Question

Je souhaite ajouter un composant 'addMore', mais le compilateur ne le reconnaît pas. Qu'est-ce que j'ai raté? s'il vous plaît, aidez-moi.

importer React depuis 'react'
importer { MdDeleteForever } depuis 'react-icons/md'
importer addMore depuis '../addMore/addMore'
importer './ShoppingCardItem.css'


fonction d'exportation par défaut ShoppingCardItem() {

  retour (
    

        
        
2x Apfel
        
        
        
    
  )
}




importer React depuis 'react'

exporter la fonction par défaut addMore() {
  retour (
    

        +
        -
    
  )
}

            

Answer 1

Le nom du composant doit commencer par 大写字母开头。将文件名addMore.jsx重命名为AddMore.jsx et également modifier le chemin d'importation. Pour afficher ces informations, veuillez visiter Composants fonctionnels 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>
  )
}