不包含名为“export”的导出项

Question

我正在尝试将一个简单的组件导入到我的React应用中。但是我无法定位到这个组件。

在导入组件时，我遇到了以下错误：

./src/App.js 61:28-32 './componentes/Menu' does not contain an export named '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>
        );
    }

}

我在我的应用程序中按以下方式调用它。

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;

- Rafael Augusto

Answer 1

这是因为您试图从文件中解构导出的默认组件。

只需在App组件的导入语句中删除Menu周围的方括号，所以import { Menu } from './componentes/Menu';变成import Menu from './componentes/Menu';

- Michael Elliott

Answer 2

在您的Menu.js中，您使用了export default，这会创建一个名为default的导出项，无论类的名称是什么。

您应该采取以下措施之一：

1. 在App.js中使用import Menu from './components/Menu';
2. 在Menu.js中使用export class Menu extends Component

- otakustay

Answer 3

尝试将 import { Menu } from './componentes/Menu'; 更改为 import Menu from './componentes/Menu';

- CraZyDroiD

---

如果我删除括号，那么我们如何使用更多呢？import { Menu, Footer } from './componentes/Menu'; 这样正确吗？ - user9437856