未捕获的ReferenceError：未定义搜索栏

debugcn 发表于 Dev

杰夫

抱歉，我是React的新手。我的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

看来，它无法识别Searchbar组件。问题是什么？

舒巴姆·哈特里（Shubham Khatri）

解决方案非常简单。您在文件中错误地导入了搜索栏。您需要像一样导入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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。