Bagaimana cara mengimpor dan mengekspor komponen menggunakan React + ES6 + webpack?

Saya bermain-main dengan Reactdan ES6menggunakan babeldan webpack. Saya ingin membangun beberapa komponen dalam file yang berbeda, mengimpor satu file dan menggabungkannyawebpack

Katakanlah saya memiliki beberapa komponen seperti ini:

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

Menggunakan webpack dan mengikuti tutorial mereka, saya punya main.js:

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

Setelah membangun proyek dan menjalankannya, saya mendapatkan kesalahan berikut di konsol browser saya:

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

Apa yang saya lakukan salah? Bagaimana saya bisa mengimpor dan mengekspor komponen saya dengan benar?

Coba bawaan ing ekspor dalam komponen Anda:

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

dengan menggunakan default Anda menyatakan itu akan menjadi anggota dalam modul itu yang akan diimpor jika tidak ada nama anggota tertentu yang disediakan. Anda juga dapat menyatakan bahwa Anda ingin mengimpor anggota spesifik yang disebut MyNavbar dengan melakukan itu: import {MyNavbar} dari './comp/my-navbar.jsx'; dalam hal ini, tidak diperlukan standar

Membungkus komponen dengan kawat gigi jika tidak ada ekspor standar:

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

atau mengimpor beberapa komponen dari file modul tunggal

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

Untuk mengekspor satu komponen dalam ES6, Anda dapat menggunakan export defaultsebagai berikut:

class MyClass extends Component {
 ...
}

export default MyClass;

Dan sekarang Anda menggunakan sintaks berikut untuk mengimpor modul itu:

import MyClass from './MyClass.react'

Jika Anda ingin mengekspor beberapa komponen dari satu file, deklarasi akan terlihat seperti ini:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

Dan sekarang Anda dapat menggunakan sintaks berikut untuk mengimpor file-file itu:

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

MDN memiliki dokumentasi yang sangat bagus untuk semua cara baru untuk mengimpor dan mengekspor modul adalah ES 6 Import-MDN . Deskripsi singkat tentang pertanyaan Anda, Anda bisa:

1. Menyatakan komponen Anda mengekspor sebagai 'default' komponen yang modul ini mengekspor: export default class MyNavbar extends React.Component {, dan jadi ketika Mengimpor 'MyNavbar' Anda Anda TIDAK harus meletakkan kurung kurawal di sekitarnya: import MyNavbar from './comp/my-navbar.jsx';. Namun, tidak menggunakan kurung kurawal di sekitar impor memberitahu dokumen bahwa komponen ini dinyatakan sebagai 'standar ekspor'. Jika tidak, Anda akan mendapatkan kesalahan (seperti yang Anda lakukan).

2. Jika Anda tidak ingin mendeklarasikan 'MyNavbar' sebagai ekspor default saat mengekspornya:, export class MyNavbar extends React.Component {maka Anda harus membungkus impor 'MyNavbar dalam kurung kurawal: import {MyNavbar} from './comp/my-navbar.jsx';

Saya pikir karena Anda hanya memiliki satu komponen di file './comp/my-navbar.jsx', itu keren untuk menjadikannya ekspor default. Jika Anda memiliki lebih banyak komponen seperti MyNavbar1, MyNavbar2, MyNavbar3 maka saya tidak akan membuat salah satu atau mereka sebagai standar dan untuk mengimpor komponen yang dipilih dari modul ketika modul belum menyatakan satu hal standar yang dapat Anda gunakan: import {foo, bar} from "my-module";where foo dan bilah adalah beberapa anggota modul Anda.

Jelas membaca dokumen MDN itu memiliki contoh yang baik untuk sintaks. Semoga ini membantu dengan sedikit lebih banyak penjelasan untuk siapa pun yang ingin bermain-main dengan ES 6 dan komponen impor / ekspor di Bereaksi.

Semoga ini Bermanfaat

Langkah 1: App.js adalah (modul utama) mengimpor Modul Login

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

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

export default App;

Langkah 2: Buat Folder Login dan buat file login.js dan sesuaikan kebutuhan Anda, itu secara otomatis dirender ke App.js Contoh 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;

Ada dua cara berbeda dalam mengimpor komponen dalam reaksi dan cara yang disarankan adalah cara komponen

1. Cara perpustakaan (tidak disarankan)
2. Cara komponen (disarankan)

Penjelasan detail PFB

Cara mengimpor perpustakaan

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

Ini bagus dan berguna tetapi tidak hanya bundel Button dan FlatButton (dan dependensinya) tetapi seluruh perpustakaan.

Cara mengimpor komponen

Salah satu cara untuk mengatasinya adalah dengan mencoba hanya mengimpor atau memerlukan apa yang dibutuhkan, katakanlah cara komponen. Menggunakan contoh yang sama:

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

Ini hanya akan mengikat Tombol, FlatButton dan dependensinya masing-masing. Tapi tidak seluruh perpustakaan. Jadi saya akan mencoba untuk menghapus semua impor perpustakaan Anda dan menggunakan cara komponen sebagai gantinya.

Jika Anda tidak menggunakan banyak komponen maka itu akan mengurangi ukuran file Anda.