Як імпортувати та експортувати компоненти за допомогою веб-пакету React + ES6 +?

Я граю навколо Reactі ES6використовую babelі webpack. Я хочу створити кілька компонентів у різних файлах, імпортувати в один файл і зв'язати їхwebpack

Скажімо, у мене є кілька таких компонентів:

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

Використовуючи веб-пакет і слідуючи їх навчальним посібником, я маю 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`.

Що я роблю неправильно? Як я можу правильно імпортувати та експортувати свої компоненти?

Спробуйте замовчувати експорт у своїх компонентах:

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, зробивши це: import {MyNavbar} з './comp/my-navbar.jsx'; у цьому випадку не потрібні дефолти

Обгортання компонентів дужками, якщо немає експорту за замовчуванням:

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

або імпортувати декілька компонентів з одного файлу модуля

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

Для експорту одного компонента в 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'

У 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 і бар є декількома членами вашого модуля.

Однозначно прочитайте документ MDN, у ньому є хороші приклади для синтаксису. Сподіваємось, це допомагає трохи більше пояснень для тих, хто хоче іграти з ES 6 та імпортувати / експортувати компоненти в React.

Я сподіваюся, що це корисно

Крок 1: App.js (основний модуль) імпортує модуль входу

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

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

export default App;

Крок 2. Створіть папку входу та створіть файл login.js та налаштуйте свої потреби, він автоматично відображатиметься в App.js Приклад 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;

Є два різні способи імпорту компонентів у реагування, і рекомендований спосіб - компонентний спосіб

1. Бібліотечний шлях (не рекомендується)
2. Компонентний спосіб (рекомендується)

Детальне пояснення ПФБ

Бібліотечний спосіб імпорту

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

Це приємно і зручно, але воно включає не лише кнопки Button та FlatButton (та їх залежності), а й цілі бібліотеки.

Компонентний спосіб імпорту

Один із способів полегшити це - спробувати імпортувати або вимагати лише необхідне, скажімо, компонентний спосіб. Використовуючи той же приклад:

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

Це стосується лише Button, FlatButton та їх відповідних залежностей. Але не вся бібліотека. Тож я б спробував позбутися всього імпорту вашої бібліотеки і використовувати замість цього компонентний спосіб.

Якщо ви не використовуєте безліч компонентів, то це повинно значно зменшити розмір файлу, що постачається в комплекті.