我正在尝试将一个简单的组件导入到我的React中。我无法找到这个组件。
导入组件时出现以下错误
./ src / App.js 61:28-32'./componentes/Menu'不包含导出 名为“菜单”。
这是我的简单组成部分:
import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
export default class Menu extends Component {
render() {
return (
<div>
<Button bsStyle="danger">Hello World Dangerhahahah</Button>
</div>
);
}
}
我在我的App中将其称为如下。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Menu } from './componentes/Menu';
import { Button } from 'react-bootstrap';
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Menu />
<Button bsStyle="danger">Take this action</Button>
<div className="App">
<div className="bs-header" id="content">
<div className="container">
<h1>Template Changelog</h1>
<p>Lists all changes to the HTML template files</p>
</div>
</div>
</div>
);
}
}
export default App;
答案 0 :(得分:4)
这是因为你试图从文件中解构导出的默认组件。
只需从应用组件的import语句中移除Menu
周围的括号,即import { Menu } from './componentes/Menu';
变为import Menu from './componentes/Menu';
答案 1 :(得分:2)
在您使用的Menu.js
export default
中创建名为default
的导出条目,无论类名是什么
你应该:
import Menu from './components/Menu';
App.js
export class Menu extends Component
Menu.js
醇>
答案 2 :(得分:1)
尝试将import { Menu } from './componentes/Menu';
更改为import Menu from './componentes/Menu';