Come importare ed esportare componenti usando il webpack React + ES6 +?

Question

Sto giocando con React e ES6 utilizzando babel e webpack. Voglio costruire diversi componenti in diversi file, l'importazione in un unico file e li impacchettare con webpack

Diciamo che ho un paio di componenti come questo:

my-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> 
    ); 
    } 
} 

main-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') 
); 

Utilizzando webpack e dopo la loro tutorial, ho main.js:

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

Dopo aver costruito il progetto e l'esecuzione di esso, ottengo il seguente errore nel mio console del browser:

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`. 

Che cosa sto facendo di sbagliato? Come posso importare ed esportare correttamente i miei componenti?

Answer 1

Prova predefinita ing esportazioni nei componenti:

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> 
 
    ); 
 
    } 
 
}

utilizzando di default si esprime che sta per essere membro a quel modulo che sarebbe importato se nessun nome utente specifico è fornito. Potresti anche esprimere il desiderio di importare il membro specifico chiamato MyNavbar in questo modo: import {MyNavbar} da './comp/my-navbar.jsx'; in questo caso, alcun valore predefinito è necessario

Answer 2

componenti di confezionamento con bretelle, se nessuna esportazione di default:

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

o importare componenti multipli da file singolo modulo

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

Answer 3

MDN ha veramente bello documentazione per tutti i nuovi modi per importare ed esportare i moduli sono ES 6 Import-MDN. Una breve descrizione di essa per quanto riguarda la tua domanda si potrebbe aver uno:

1. dichiarato il componente che si esportavano come componente 'default' che questo modulo esportava: export default class MyNavbar extends React.Component {, e così quando importazione tua ' MyNavbar 'NON DEVI mettere intorno parentesi graffe: import MyNavbar from './comp/my-navbar.jsx';. Non inserire parentesi graffe attorno a un'importazione, ma indica al documento che questo componente è stato dichiarato come "esportazione predefinita". In caso contrario, riceverai un errore (come hai fatto tu).

2. Se non si vuole dichiarare il vostro 'MyNavbar' come l'esportazione predefinita quando esportarlo: export class MyNavbar extends React.Component {, allora si dovrebbe avvolgere l'importazione di 'MyNavbar tra parentesi graffe: import {MyNavbar} from './comp/my-navbar.jsx';

Penso che dal momento che tu abbia un solo componente nel tuo file "./comp/my-navbar.jsx" è bello renderlo l'esportazione predefinita. Se avessi avuto più componenti come MyNavbar1, MyNavbar2, MyNavbar3, quindi non farei né loro né predefiniti né importare i componenti selezionati di un modulo quando il modulo non ha dichiarato alcuna cosa di default che puoi usare: import {foo, bar} from "my-module"; dove foo e bar sono membri multipli del tuo modulo.

Leggere definitivamente il documento MDN ha buoni esempi per la sintassi. Speriamo che questo aiuti con un po 'più di una spiegazione per chiunque stia cercando di giocare con ES 6 e import/export di componenti in React.

Answer 4

Per esportare un singolo componente in ES6, è possibile utilizzare export default come segue:

class MyClass extends Component { 
... 
} 

export default MyClass; 

E ora si utilizza la seguente sintassi per importare quel modulo:

import MyClass from './MyClass.react' 

Se siete alla ricerca di esportare più componenti da un singolo file la dichiarazione sarebbe simile a questa:

export class MyClass1 extends Component { 
... 
} 

export class MyClass2 extends Component { 
... 
} 

e ora è possibile utilizzare la seguente sintassi per importare i file:

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