如何使用React + ES6 + webpack導入和導出組件？

Question

我正在玩React和ES6使用babel和webpack。我想建立一個單一的文件在不同的文件，輸入幾個組件和捆綁他們與webpack

比方說，我有這樣幾個部分：

我-navbar.jsx

import React from 'react'; 
import Navbar from 'react-bootstrap/lib/Navbar'; 

export class MyNavbar extends React.Component { 
    render(){ 
     return (
     <Navbar className="navbar-dark" fluid> 
     ... 
     </Navbar> 
    ); 
    } 
} 

主page.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import MyNavbar from './comp/my-navbar.jsx'; 

export class MyPage extends React.Component{ 
    render(){ 
    return(
     <MyNavbar /> 
     ... 
    ); 
    } 
} 

ReactDOM.render(
    <MyPage />, 
    document.getElementById('container') 
); 

使用的WebPack和跟隨他們的教程中，我有main.js：

import MyPage from './main-page.jsx'; 

建設項目，它運行後，我得到我的瀏覽器控制檯以下錯誤：

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`. 

我在做什麼錯？我如何正確導入和導出我的組件？

Answer 1

嘗試默認在你的組件荷蘭國際集團的出口：

import React from 'react'; 
 
import Navbar from 'react-bootstrap/lib/Navbar'; 
 

 
export default class MyNavbar extends React.Component { 
 
    render(){ 
 
     return (
 
     <Navbar className="navbar-dark" fluid> 
 
     ... 
 
     </Navbar> 
 
    ); 
 
    } 
 
}

使用默認你表達的將是構件模塊假若沒有特定成員的名字被輸入在被提供。您也可以表達您想要導入名爲MyNavbar的特定成員：從'./comp/my-navbar.jsx'導入{MyNavbar};在這種情況下，沒有默認的需要

Answer 2

包裝組件用大括號如果沒有默認出口：

import {MyNavbar} from './comp/my-navbar.jsx'; 

或單個模塊文件

import {MyNavbar1, MyNavbar2} from './module'; 

Answer 3

MDN進口多個組件對所有非常好的文檔導入和導出模塊的新方法是ES 6 Import-MDN。它在問候你的問題的簡要說明你可能已經之一：

1. 宣佈你被出口爲「默認」組件，這個組件是出口組件：匯入「時 export default class MyNavbar extends React.Component {，等等MyNavbar'你不必在它周圍放上花括號：import MyNavbar from './comp/my-navbar.jsx';。 不要將大括號括起來，而是告訴文檔這個組件被聲明爲'導出默認'。如果不是，你會得到一個錯誤（如你所做的那樣）。

2. 如果您不想將其導出時，聲明你的「MyNavbar」作爲默認的導出：export class MyNavbar extends React.Component {，那麼你就必須來包裝你的「MyNavbar進口在大括號： import {MyNavbar} from './comp/my-navbar.jsx';

我認爲，因爲你只有'./comp/my-navbar.jsx'文件中有一個組件，所以將其設置爲默認導出是很酷的。如果你有更多的組件，比如MyNavbar1，MyNavbar2，MyNavbar3，那麼我不會讓它們成爲默認的，並且當模塊沒有聲明任何一個可以使用的默認模塊時，導入模塊的選定組件：import {foo, bar} from "my-module";其中foo和bar是你模塊的多個成員。

絕對讀取MDN文檔它有很好的語法示例。希望這有助於爲那些想要在ESR 6和組件導入/導出中使用React的玩家提供一點解釋。

Answer 4

要ES6導出單個組件，您可以使用export default如下：

class MyClass extends Component { 
... 
} 

export default MyClass; 

現在您使用以下語法來導入模塊：

import MyClass from './MyClass.react' 

如果你正在尋找從單個文件導出多個組件聲明看起來像這樣：

export class MyClass1 extends Component { 
... 
} 

export class MyClass2 extends Component { 
... 
} 

現在你可以使用下面的語法來導入這些文件：

import {MyClass1, MyClass2} from './MyClass.react'