React + ES6 + 웹 팩을 사용하여 구성 요소를 가져오고 내보내는 방법은 무엇입니까?

React + ES6 + 웹 팩을 사용하여 구성 요소를 가져오고 내보내는 방법은 무엇입니까?

가지고 놀고 있다React그리고.ES6사용.babel그리고.webpack여러 개의 컴포넌트를 다른 파일에 빌드하고 단일 파일로 Import하여 번들하고 싶다.webpack

예를 들어 다음과 같은 컴포넌트가 몇 개 있습니다.

my-navbar.glx

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

웹 팩을 사용하고 그들의 튜토리얼을 따르면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 및 내보내려면 어떻게 해야 합니까?

컴포넌트에서 내보내기를 디폴트로 해 보겠습니다.

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

디폴트에서는 특정 멤버명이 지정되지 않은 경우 Import되는 모듈의 멤버로 express를 사용합니다.'.comp/my-navar.jsx'에서 {MyNavbar}를 Import하여 MyNavbar라는 특정 멤버를 Import할 수도 있습니다.이 경우 기본값은 필요하지 않습니다.

기본 내보내기가 없는 경우 구성 요소를 중괄호로 감습니다.

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

또는 단일 모듈 파일에서 여러 컴포넌트를 Import합니다.

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

ES6에서 단일 컴포넌트를 내보내려면export default다음과 같습니다.

class MyClass extends Component {
 ...
}

export default MyClass;

이제 다음 구문을 사용하여 해당 모듈을 Import합니다.

import MyClass from './MyClass.react'

하나의 파일에서 여러 컴포넌트를 내보내는 경우 선언은 다음과 같습니다.

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

이제 다음 구문을 사용하여 이러한 파일을 가져올 수 있습니다.

import {MyClass1, MyClass2} from './MyClass.react'

MDN에는 모듈을 Import 및 내보내기 위한 모든 새로운 방법에 대한 훌륭한 문서가 있습니다.ES 6 Import-MDN 。질문에 대한 간단한 설명은 다음과 같습니다.

1. 내보내는 컴포넌트를 이 모듈이 내보내는 '기본' 컴포넌트로 선언했습니다.export default class MyNavbar extends React.Component {그래서 'My Navbar'를 Import할 때 곱슬곱슬한 괄호를 둘 필요가 없습니다.import MyNavbar from './comp/my-navbar.jsx';. Import 주위에 물결 괄호를 붙이지 않는 것은 이 컴포넌트가 'export default'로 선언되었음을 문서에 알리는 것입니다.그렇지 않으면 오류가 발생합니다.

2. 내보낼 때 'MyNavbar'를 기본 내보내기로 선언하지 않으려면 다음과 같이 하십시오.export class MyNavbar extends React.Component {Import한 My Navbar를 곱슬곱슬한 괄호로 묶어야 합니다.import {MyNavbar} from './comp/my-navbar.jsx';

'.comp/my-navbar.jsx' 파일에 컴포넌트가 1개밖에 없기 때문에 기본 내보내기로 하는 것이 좋다고 생각합니다.MyNavbar1, MyNavbar2, MyNavbar3와 같은 구성 요소가 더 있었다면 모듈이 사용할 수 있는 기본 구성 요소 중 하나를 선언하지 않았을 때 해당 구성 요소를 기본값으로 설정하지 않고 모듈의 선택된 구성 요소를 가져올 수 있습니다.import {foo, bar} from "my-module";후우바

MDN 문서를 꼭 읽어보세요.구문에 대한 좋은 예가 있습니다.이것이 ES 6와 React의 컴포넌트 수입/수출에 대해 더 많은 설명을 할 수 있기를 바랍니다.

이게 Helpfull이길 바래

순서 1: App.js는 (메인 모듈) 로그인 모듈을 Import합니다.

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 방법

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

이것은 편리하고 편리하지만 Button과 FlatButton(및 그 의존관계)뿐만 아니라 라이브러리 전체를 번들할 수 없습니다.

컴포넌트 Import 방법

이를 완화하기 위한 한 가지 방법은 필요한 것만 가져오거나 요구하는 것입니다. 예를 들어 컴포넌트 방식입니다.같은 예를 사용하여 다음 작업을 수행합니다.

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

이것은 버튼, 플랫 버튼 및 각각의 종속성만 번들합니다.하지만 도서관 전체가 아니야그래서 저는 당신의 모든 라이브러리 Import를 없애고 대신 컴포넌트 방식을 사용하려고 합니다.

많은 컴포넌트를 사용하지 않는 경우 번들파일의 사이즈를 대폭 줄일 수 있습니다.

언급URL : https://stackoverflow.com/questions/33956201/how-to-import-and-export-components-using-react-es6-webpack