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

似乎它无法识别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;

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

1 个答案: