web-dev-qa-db-ja.com

React + ES6 + webpackを使ってコンポーネントをインポートおよびエキスパートするにはどうすればいいですか？

私はReactとbabelを使ってwebpackとES6で遊んでいます。異なるファイルで複数のコンポーネントを作成し、単一のファイルにインポートし、それらを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`.

何がおかしいのですか？コンポーネントを正しくインポートおよびエクスポートする方法を教えてください。

reactjsecmascript-6webpack
112
itaied

default コンポーネントのエクスポートを試してみてください。

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';この場合、デフォルトは不要です

111
Emilio Rodriguez

デフォルトのエクスポートがない場合は、コンポーネントを中括弧で囲みます。

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

または単一のモジュールファイルから複数のコンポーネントをインポートする

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

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'
85
josephmisiti

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

'./comp/my-navbar.jsx'ファイルにコンポーネントが1つしかなかったので、それをデフォルトのエクスポートにするのが良いと思います。 MyNavbar1、MyNavbar2、MyNavbar3などのコンポーネントがさらにある場合、これらのいずれかまたはデフォルトを作成せず、モジュールが使用できるデフォルトのいずれかをモジュールが宣言していない場合、モジュールの選択したコンポーネントをインポートします：import {foo, bar} from "my-module"; fooとbarはモジュールの複数のメンバーです。

MDN docを必ずお読みください。構文の良い例があります。これが、ES 6とReactのコンポーネントのインポート/エクスポートを操作しようとしている人のためのもう少しの説明に役立つことを願っています。

9
Carol Gonzalez

これが役に立ったと思います

ステップ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;
3
Vidhyapathi Kandhasamy

コンポーネントを反応的にインポートする方法は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およびそれらのそれぞれの依存関係のみをバンドルします。しかし図書館全体ではありません。だから私はあなたのすべてのライブラリのインポートを取り除き、代わりにコンポーネントの方法を使うことを試みるでしょう。

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

0
Hemadri Dasari