Uncaught ReferenceError: Suchleiste ist nicht definiert

Question

Sorry, ich bin neu in React. Ich habe 2 Komponenten in meiner Anwendung. Hier ist die Mutter:

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import './Searchbar'; 

const App =() => { 

    return (
     <div className="App"> 
     <div className="App-header"> 
      <Searchbar></Searchbar> 
      <h2>Welcome to React</h2> 
     </div> 
     </div> 
    ); 

} 

export default App; 

und hier ist die searchbar Komponente:

import React,{Component} from 'react'; 

export default class Searchbar extends Component{ 

    render(){ 

     return <div>Here is search bar</div>; 
    } 
} 

Leider, wenn die Seite geladen wird es mit dem Fehler klagt:

Uncaught ReferenceError: Searchbar is not defined 

Es scheint, dass es erkennt die Searchbar-Komponente nicht. Was ist das Problem?

Answer 1

Die Lösung ist wirklich einfach. Sie importieren die Suchleiste falsch in Ihre Datei. Sie müssen es wie import Searchbar from './Searchbar'; importieren, da Sie es als Standard exportiert haben, müssen Sie es auch standardmäßig importieren.

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Searchbar from './Searchbar'; 

const App =() => { 

    return (
     <div className="App"> 
     <div className="App-header"> 
      <Searchbar></Searchbar> 
      <h2>Welcome to React</h2> 
     </div> 
     </div> 
    ); 

} 

export default App;