React + ES6 + 웹팩을 사용하여 컴포넌트를 가져오고 내보내는 방법은 무엇입니까?

나는 Reactand를 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')
);

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} from './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'를 기본 내보내기로 선언하지 않으려면 'MyNavbar export class MyNavbar extends React.Component {가져 오기를 중괄호로 묶어야합니다. 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;

반응 방식으로 컴포넌트를 가져 오는 두 가지 방법이 있으며 권장되는 방법은 컴포넌트 방식입니다.

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 및 해당 종속성 만 번들로 제공됩니다. 그러나 전체 라이브러리가 아닙니다. 따라서 모든 라이브러리 가져 오기를 제거하고 대신 구성 요소 방식을 사용하려고합니다.

많은 구성 요소를 사용하지 않으면 번들 파일의 크기가 상당히 줄어 듭니다.