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

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

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

Я думаю, что, поскольку у вас только один компонент в свой './комп - /мой-навигации.файл jsx' это здорово, чтобы сделать его по умолчанию экспорт. Если бы у вас было больше компонентов, таких как MyNavbar1, MyNavbar2, MyNavbar3, то я бы не сделал их по умолчанию и не импортировал выбранные компоненты модуля, когда модуль не объявил ни одну вещь по умолчанию, которую вы можете использовать: import {foo, bar} from "my-module"; где foo и bar-это несколько элементов вашего модуля.

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

Я надеюсь, что это полезно

Шаг 1: Приложение.js is (основной модуль) импортирует модуль входа

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 и Create логин.js-файл и настроить ваши потребности он автоматически отображает в приложение.JS пример входа в систему.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, и рекомендуемый способ-это component way

1. путь библиотеки (не рекомендуется)
2. компонент пути(рекомендуется)

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

библиотека способ импорта

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

это приятно и удобно, но это не только связывает кнопку и FlatButton (и их зависимости), но и весь библиотеки.

компонентный способ импорта

один из способов облегчить это-попытаться только импортировать или требовать то, что необходимо, скажем, компонентный способ. Используя тот же пример:

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

это будет только кнопка bundle, FlatButton и их соответствующие зависимости. Но не всю библиотеку. Поэтому я бы попытался избавиться от всех ваших импортных библиотек и использовать вместо этого компонентный способ.

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