未捕獲ReferenceError：搜索欄未定義

Question

對不起，我是React中的新成員。 我在我的反應應用程序中有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; 

，這裏是搜索欄組件：

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 

看來，它無法識別搜索欄組件。 問題是什麼？

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;