Uncaught ReferenceError: панель поиска не определена

Question

Извините, я новичок в реактиве. У меня есть 2 компонента в моем приложении. Вот родитель:

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; 

и здесь компонент Searchbar:

import React,{Component} from 'react'; 

export default class Searchbar extends Component{ 

    render(){ 

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

К сожалению, при загрузке страницы он жалуется с ошибкой:

Uncaught ReferenceError: Searchbar is not defined 

Кажется, что это не распознает компонент Searchbar. В чем проблема?

Answer 1

Решение действительно прост. Вы неправильно импортируете строку поиска в свой файл. Вам нужно импортировать его как import Searchbar from './Searchbar';, так как вы экспортировали его по умолчанию, вам также нужно импортировать его по умолчанию.

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;