Question

我创建了一个简单的React App，其中定义了四个组件，例如App.js，AppHeader.js，AppFooter.js，AppHome.js。我已经将AppHeader，AppFooter和AppHomem导入到App中。当我运行npm start检查输出时，出现以下错误。

元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

下面是相应的代码。请检查并帮助我，我在哪里失踪。

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import AppHeader from './AppHeader.js'
import AppFooter from './AppFooter.js'
import AppHome from './AppHome.js'

class App extends Component{
  render(){
    return (
      <div>
      <AppHeader />
      <AppHome />
      <AppFooter />
      </div>
    );
  }
}

export default App;

<!-- begin snippet: js hide: false console: true babel: false -->

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {Navbar} from 'react-bootstrap';

class AppFooter extends Component{
  render(){
    return(
      <Navbar inverse fixed="bottom">
      <Navbar.Header>
        <Navbar.Brand>
          &copy; AV Illusions
        </Navbar.Brand>
      </Navbar.Header>
    </Navbar>
    );
  }
}

export default AppFooter;

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {Jumbotron,Button} from 'react-bootstrap';

class AppHome extends Component{
  render(){
    return(
      <Jumbotron>
        <h1>Ciao , Leute!</h1>
        <p>
        Place to boost up yourself
        </p>
        <p>
        <Button variant="primary">Learn more</Button>
        </p>
        </Jumbotron>
    );
  }
}

export default AppHome;

元素类型是React

0 个答案: