不包含名為的導出

Question

我正在嘗試將一個簡單的組件導入到我的React中。 我無法找到這個組件。

導入組件時出現以下錯誤

./src/App.js 61：28-32'./componentes/Menu'不包含名為'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;

Answer 1

這是因為您正在嘗試從文件中構造導出的默認組件。

只需從App組件的import語句中刪除Menu周圍的括號，然后import { Menu } from './componentes/Menu'; import Menu from './componentes/Menu';變成import Menu from './componentes/Menu';

Answer 2

在您的Menu.js您使用export default ，它創建一個名為default的導出條目，無論類的名稱是什么

你應該：

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

Answer 3

嘗試import { Menu } from './componentes/Menu';更改import { Menu } from './componentes/Menu'; import Menu from './componentes/Menu';