Как импортировать и экспортировать компоненты с помощью React + ES6 + webpack?

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

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

мой-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>
      );
    }
}

основного 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')
);

Используя webpack и следуя их учебнику, у меня есть 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`.

Что я делаю неправильно? Как правильно импортировать и экспортировать мои компоненты?

Ответ 1

Попробуйте по умолчанию экспортировать ваши компоненты:

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

Ответ 2

Объединение компонентов с фигурными скобками, если экспорт по умолчанию не производится:

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

или импортировать несколько компонентов из файла с одним модулем

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

Ответ 3

Чтобы экспортировать один компонент в 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'

Ответ 4

У MDN действительно хорошая документация для всех новых способов импорта и экспорта модулей - это ES 6 Import-MDN. Краткое описание его в отношении вашего вопроса, который вы могли бы сделать:

Объявлен компонент, который вы экспортировали как компонент по умолчанию, который этот модуль экспортировал: export default class MyNavbar extends React.Component {, и поэтому при импорте "MyNavbar" вам не нужно класть фигурные скобки вокруг него: import MyNavbar from './comp/my-navbar.jsx';. Не помещая фигурные скобки вокруг импорта, хотя сообщает документу, что этот компонент был объявлен как "экспорт по умолчанию". Если это не так, вы получите ошибку (как и вы).
Если вы не хотите объявлять свой "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 и bar являются множественными членами вашего модуля.

Определенно прочитав документ MDN, он имеет хорошие примеры для синтаксиса. Надеюсь, это поможет с чуть более объяснением для тех, кто хочет играть с ES 6 и импортировать/экспортировать компоненты в React.