React + ES6 + webpack kullanarak bileşenleri nasıl içe ve dışa aktarırım?

Ben etrafında oynuyorum Reactve ES6kullanma babelve webpack. Farklı dosyalarda birkaç bileşen oluşturmak, tek bir dosyaya aktarmak ve bunlarıwebpack

Diyelim ki bunun gibi birkaç bileşenim var:

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

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

Web paketini kullanarak ve öğreticilerini takip ederek main.js:

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

Projeyi oluşturup çalıştırdıktan sonra, tarayıcı konsolumda aşağıdaki hatayı alıyorum:

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

Neyi yanlış yapıyorum? Bileşenlerimi nasıl düzgün bir şekilde içe ve dışa aktarabilirim?

Bileşenlerinizdeki dışa aktarmaları varsayılan olarak yapmayı deneyin :

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

varsayılanı kullanarak, o modüle üye olacağını ve belirli bir üye adı sağlanmadıysa içe aktarılacağını belirtirsiniz. Bunu yaparak MyNavbar adlı belirli üyeyi içe aktarmak istediğinizi de ifade edebilirsiniz: {MyNavbar} öğesini './comp/my-navbar.jsx'den içe aktarın; bu durumda varsayılan gerekmez

Varsayılan dışa aktarma yoksa bileşenleri kaşlı ayraçlarla sarmak:

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

veya tek modül dosyasından birden fazla bileşeni içe aktarın

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

ES6'da tek bir bileşeni dışa aktarmak için export defaultaşağıdaki şekilde kullanabilirsiniz :

class MyClass extends Component {
 ...
}

export default MyClass;

Ve şimdi bu modülü içe aktarmak için aşağıdaki sözdizimini kullanıyorsunuz:

import MyClass from './MyClass.react'

Tek bir dosyadan birden fazla bileşeni dışa aktarmak istiyorsanız, beyan aşağıdaki gibi görünecektir:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

Ve şimdi bu dosyaları içe aktarmak için aşağıdaki sözdizimini kullanabilirsiniz:

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

MDN, modülleri içe ve dışa aktarmanın tüm yeni yolları için gerçekten güzel belgelere sahip ES 6 Import-MDN'dir . Sorunuzla ilgili kısa bir açıklama şunlardan birini yapabilirsiniz:

1. : Bu modül ihraç edildiğini 'varsayılan' bileşeni olarak ihraç edildi bileşeni Beyan export default class MyNavbar extends React.Component {sizin 'MyNavbar' İçe zaman öylesine ve bunu etrafında küme parantezi koymak zorunda YAPMAYIN: import MyNavbar from './comp/my-navbar.jsx';. Bir içe aktarmanın etrafına küme parantezi koymamak, belgeye bu bileşenin bir 'dışa aktarma varsayılanı' olarak ilan edildiğini söylüyor. Değilse, bir hata alırsınız (yaptığınız gibi).

2. Dışa aktarırken 'MyNavbar'ınızı varsayılan bir dışa aktarım olarak bildirmek istemediyseniz: export class MyNavbar extends React.Component {o zaman' MyNavbar içeriğinizi küme parantezleri içine almanız gerekir: import {MyNavbar} from './comp/my-navbar.jsx';

Sanırım './comp/my-navbar.jsx' dosyanızda sadece bir bileşeniniz olduğundan, onu varsayılan dışa aktarma yapmak harika. MyNavbar1, MyNavbar2, MyNavbar3 gibi daha fazla bileşene sahip olsaydın, ikisini de varsayılan yapmazdım ve modül kullanabileceğiniz herhangi bir şeyi varsayılan olarak ilan etmediğinde bir modülün seçilen bileşenlerini içe aktarmazdım: import {foo, bar} from "my-module";nerede foo ve bar, modülünüzün birden çok üyesidir.

MDN belgesini kesinlikle okuyun, sözdizimi için iyi örnekleri vardır. Umarım bu, React'te ES 6 ve bileşen içe / dışa aktarma ile oynamak isteyenler için biraz daha fazla açıklama yapılmasına yardımcı olur.

Umarım bu yardımcı olur

1. Adım: App.js (ana modül) Giriş Modülünü içe aktarır

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

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

export default App;

Adım 2: Oturum Açma Klasörü oluşturun ve login.js dosyası oluşturun ve ihtiyaçlarınızı özelleştirerek otomatik olarak App.js Örnek Login.js'ye işleyin

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;

React'te bileşenleri içe aktarmanın iki farklı yolu vardır ve önerilen yol bileşen yöntemidir.

1. Kütüphane yolu (önerilmez)
2. Bileşen yolu (önerilir)

PFB detay açıklaması

Kütüphane içe aktarma yolu

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

Bu güzel ve kullanışlıdır, ancak yalnızca Button ve FlatButton'ı (ve bunların bağımlılıklarını) değil, tüm kitaplıkları da içerir.

Bileşen ithalat yolu

Bunu hafifletmenin bir yolu, yalnızca gerekli olanı içe aktarmaya veya gerektirmeye çalışmaktır, diyelim ki bileşen yolu. Aynı örneği kullanarak:

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

Bu yalnızca Button, FlatButton ve ilgili bağımlılıklarını bir araya getirecektir. Ama bütün kütüphane değil. Bu yüzden, tüm kütüphane içe aktarmalarınızdan kurtulmaya ve bunun yerine bileşen yolunu kullanmaya çalışacağım.

Çok fazla bileşen kullanmıyorsanız, paketlenmiş dosyanızın boyutunu önemli ölçüde azaltmalıdır.