爲什麼我的ES6導入/導出不起作用？

我試圖導入我的班create-react-app爲什麼我的ES6導入/導出不起作用？

工作例如：

export default class HeaderView extends Component { 
    render() { 
     return (
      <div className="header-view"> 
       {this.props.children} 
      </div> 
     ); 
    } 
}

import HeaderView from './HeaderView'

但是當我做

export class HeaderView extends Component { }

然後

import { HeaderView } from './HeaderView'是undefined

我試過不同的方法，但都沒有工作。最近我得到的是

export default { HeaderView }但隨後

import HeaderView from './HeaderView'是Object { HeaderView:.. }和 import {HeaderView} from './HeaderView'是undefined

來源

2016-12-27 Lauri

奇怪的行爲，你確定你的第二種方法？ –

您可以請顯示文件夾結構+您導入HeaderView的文件到 – Ralph

呃..感謝拉爾夫提到的文件夾結構。我有我的HeaderView文件夾中的index.js，我導入/導出HeaderView.js ..我想我的問題在那裏。 – Lauri

你忘記延長您的成分反應，還需要進行導入每個組件反應：

import React from "react"; 
export default class HeaderView extends React.Component { 
    render() { 
    return (
     <div className="header-view"> 
      {this.props.children} 
     </div> 
    ); 
    } 
}

Then

import HeaderView from './HeaderView.js'

應該工作。還要注意我添加文件擴展名.js或.jsx

我相信你只能導入一個組成部分，而不當其被添加爲你安裝到您的環境中庫或外部文件中的文件擴展名。

import { HeaderView } from './HeaderView.js'

當它們是多個組件作爲同一個文件內的對象時使用。

退房這個答案來解釋進口： How to import part of object in ES6 modules

編輯：爲了解決進口沒有你需要的擴展已經配置的WebPack尋找默認情況下這些擴展。

來源

2016-12-27 16:44:32 DirtyRedz

OP已經說過第一個例子「正在工作」，所以我們可以假定'Component'被定義在某個地方。他們想知道爲什麼使用命名導出不起作用。 *「我相信，只有當您將其添加爲您安裝到環境中的庫或外部文件時，纔會導入沒有文件擴展名的組件。」*如何處理取決於OP未說明的模塊。 –

我只是在檢查和文件擴展名藝術實際上如果你設置你的環境（packages.json）默認查找這些擴展名。沒有你需要分配的擴展，Sry我的意思是Webpack不包，json – DirtyRedz

Webpack默認解析'.js'：https：//webpack.github.io/docs/configuration.html#resolve-extensions。另外，OP可能沒有使用webpack。 –

由於DirtyRedz提到，請確保您包含導入從「反應」反應;從進口ReactDOM「反應-DOM」

此外，添加默認你的類組件例如：出口默認類Headerview擴展React.Component {..} 當您導入另一個文件中的組件，您不需要在{}內包含組件。祝你好運

來源

2016-12-27 22:27:11

爲什麼我的ES6導入/導出不起作用？

回答

相關問題