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

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 {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'ファイルにコンポーネントが1つしかないので、それをデフォルトのエクスポートにすると便利だと思います。MyNavbar1、MyNavbar2、MyNavbar3のようなコンポーネントが多かった場合は、どちらもデフォルトにせず、モジュールが使用できるデフォルトを1つも宣言していない場合は、モジュールの選択したコンポーネントをインポートします。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;

リアクションでコンポーネントをインポートするには2つの異なる方法があり、推奨される方法はコンポーネントの方法です

1. ライブラリの方法（非推奨）
2. コンポーネントウェイ（推奨）

PFB詳細説明

ライブラリのインポート方法

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

これは便利で便利ですが、ButtonとFlatButton（およびそれらの依存関係）だけでなく、ライブラリ全体がバンドルされています。

コンポーネントのインポート方法

これを軽減する1つの方法は、必要なものだけをインポートするか、必要とすることです。コンポーネントの方法を考えてみましょう。同じ例を使用：

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

これは、Button、FlatButton、およびそれぞれの依存関係のみをバンドルします。しかし、ライブラリ全体ではありません。だから私はあなたのすべてのライブラリのインポートを取り除き、代わりにコンポーネントの方法を使用しようとします。

多くのコンポーネントを使用していない場合は、バンドルファイルのサイズを大幅に削減する必要があります。