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

я играю с 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>
      );
    }
}

главная-страница.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`.

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

95
ecmascript-6 reactjs webpack

6 ответов

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

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} from './комп - /мой-навигации.jsx'; в этом случае значение по умолчанию не требуется

93

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

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

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

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

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

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

9

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

Шаг 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;
2

существует два разных способа импорта компонентов в 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';

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

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

0