嘗試導入錯誤：“App”未從“./App”導出

Question

我正在開發貨幣轉換器應用程序，我從代碼筆 ( https://codepen.io/jmean/pen/Oxmgxp ) 獲得了代碼。 我正在嘗試運行此代碼，但出現此錯誤：./src/index.js 嘗試導入錯誤：'App' 未從 './App' 導出。

我試過添加導出默認 App(); 在 index.js 和 App.js 文件上，但它不起作用。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {App} from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

我希望代碼能夠像在代碼筆上一樣編譯並顯示在瀏覽器上。

Answer 1

如果是默認導出，則不需要將導入放在花括號中。

import App from './App';

是你應該寫的。

Answer 2

有兩種方法可以構建導入/導出對。

默認：

應用程序.js

export default class App { ... }

索引.js

import App from './App';

命名：

應用程序.js

export class App { ... }

索引.js

import { App } from './App';

Answer 3

我在 App 組件上導入反應時出錯，這是一個愚蠢的問題，我以錯誤的方式導入反應核心。

這個編譯但有那個錯誤

import {ComponentName} from "./ComponentName"

這有效：

import ComponentName from './ComponentName'

這很奇怪，但希望有所幫助！

Answer 4

有兩種導出方式，

命名導出

使用命名導出，一個文件可以有多個命名導出。 然后導入他們想要用大括號括起來的特定導出。 導入模塊的名稱必須與導出模塊的名稱相同。

// imports
import { MyComponent } from "./MyComponent";

// exports from ./MyComponent.js file
export const MyComponent = () => {}

默認導出

每個文件只能有一個默認導出。 當我們導入時，我們必須指定一個名稱並導入如下：

// import
import MyDefaultComponent from "./MyDefaultExport";

// export
const MyComponent = () => {}
export default MyComponent;

注意： import 的命名在默認導出中是完全獨立的，我們可以使用任何我們喜歡的名稱。

Answer 5

我的工作是指定整個文件名： import { App } from './App.js'; 或從 './App.jsx' 導入 { App };

如果您最終有導出默認值，那么您不要將 {} 放在 import App from './App.js' 上； 如果你沒有它，那么你把 {}。

項目清單