Как импортировать и экспортировать компоненты, используя 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`.

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

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

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 и bar - это несколько членов вашего модуля.

Обязательно прочтите документ 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;

Есть два разных способа импорта компонентов в React, и рекомендуемый способ - компонентный.

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

Подробное объяснение PFB

Библиотечный способ импорта

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 и их соответствующие зависимости. Но не всю библиотеку. Поэтому я бы попытался избавиться от всего импорта вашей библиотеки и вместо этого использовать компонентный способ.

Если вы не используете много компонентов, это должно значительно уменьшить размер вашего связанного файла.