Jak importować i eksportować komponenty za pomocą React + ES6 + webpack?

Bawię się Reacti ES6używam babeli webpack. Chcę zbudować kilka komponentów w różnych plikach, zaimportować je w jednym pliku i połączyć je zwebpack

Powiedzmy, że mam kilka takich komponentów:

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

Używając webpacka i postępując zgodnie z ich samouczkiem, mam main.js:

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

Po zbudowaniu projektu i uruchomieniu go w konsoli przeglądarki pojawia się następujący błąd:

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

Co ja robię źle? Jak mogę poprawnie importować i eksportować moje komponenty?

Spróbuj ustawić domyślne eksporty w swoich komponentach:

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

używając default, wyrażasz, że będzie to element członkowski w tym module, który zostanie zaimportowany, jeśli nie zostanie podana żadna określona nazwa elementu członkowskiego. Możesz również wyrazić chęć zaimportowania określonego członka o nazwie MyNavbar, wykonując następujące czynności: importuj {MyNavbar} z „./comp/my-navbar.jsx”; w tym przypadku nie jest wymagana żadna wartość domyślna

Zawijanie komponentów klamrami, jeśli nie ma domyślnych eksportów:

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

lub importuj wiele komponentów z jednego pliku modułu

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

Aby wyeksportować pojedynczy komponent w ES6, możesz użyć export default:

class MyClass extends Component {
 ...
}

export default MyClass;

A teraz używasz następującej składni, aby zaimportować ten moduł:

import MyClass from './MyClass.react'

Jeśli chcesz wyeksportować wiele komponentów z jednego pliku, deklaracja będzie wyglądać mniej więcej tak:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

Teraz możesz użyć następującej składni, aby zaimportować te pliki:

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

MDN ma naprawdę fajną dokumentację dotyczącą wszystkich nowych sposobów importowania i eksportowania modułów - ES 6 Import-MDN . Krótki opis tego w odniesieniu do twojego pytania, który mógłbyś:

1. Deklarowana składnik zostałeś eksportu jako „default” komponentu że moduł ten został wywozu: export default class MyNavbar extends React.Component {i tak podczas importowania swoją „MyNavbar” nie trzeba umieścić nawiasy klamrowe wokół niego: import MyNavbar from './comp/my-navbar.jsx';. Jednak brak nawiasów klamrowych wokół importu mówi dokumentowi, że ten komponent został zadeklarowany jako „domyślny eksport”. Jeśli tak nie jest, pojawi się błąd (tak jak zrobiłeś).

2. Jeśli nie chcesz zadeklarować swojego 'MyNavbar' jako domyślnego eksportu podczas eksportowania: export class MyNavbar extends React.Component {to musiałbyś opakować import 'MyNavbar w nawiasy klamrowe: import {MyNavbar} from './comp/my-navbar.jsx';

Myślę, że skoro miałeś tylko jeden komponent w swoim pliku „./comp/my-navbar.jsx”, fajnie jest ustawić go jako domyślny eksport. Gdybyś miał więcej komponentów, takich jak MyNavbar1, MyNavbar2, MyNavbar3, nie ustawiłbym żadnego z nich jako domyślnych i importowałbym wybrane komponenty modułu, gdy moduł nie zadeklarował żadnej rzeczy, której możesz użyć: import {foo, bar} from "my-module";gdzie foo i bar to wielu członków Twojego modułu.

Zdecydowanie przeczytaj dokument MDN, który zawiera dobre przykłady składni. Miejmy nadzieję, że pomoże to trochę wyjaśnić każdemu, kto chce bawić się ES 6 i importem / eksportem komponentów w React.

Mam nadzieję, że to jest pomocne

Krok 1: App.js to (główny moduł) zaimportuj moduł logowania

import React, { Component } from 'react';
import './App.css';
import Login from './login/login';

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default App;

Krok 2: Utwórz folder logowania i utwórz plik login.js oraz dostosuj swoje potrzeby, automatycznie renderuje się do App.js Przykład Login.js

import React, { Component } from 'react';
import '../login/login.css';

class Login extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default Login;

Istnieją dwa różne sposoby importowania komponentów w reakcji, a zalecany sposób to sposób komponentu

1. Biblioteka (niezalecane)
2. Sposób komponentu (zalecane)

Szczegółowe wyjaśnienie PFB

Biblioteczny sposób importu

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

Jest to przyjemne i poręczne, ale zawiera nie tylko pakiety Button i FlatButton (i ich zależności), ale całe biblioteki.

Komponentowy sposób importu

Jednym ze sposobów złagodzenia tego problemu jest próba zaimportowania lub wymagania tylko tego, co jest potrzebne, powiedzmy sposób komponentu. Korzystając z tego samego przykładu:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

Spowoduje to połączenie tylko Button, FlatButton i ich odpowiednich zależności. Ale nie cała biblioteka. Więc spróbuję pozbyć się wszystkich importów z biblioteki i zamiast tego użyć komponentu.

Jeśli nie używasz wielu komponentów, powinno to znacznie zmniejszyć rozmiar spakowanego pliku.