web-dev-qa-db-ja.com

Reactコンポーネントのエクスポートが機能しないのはなぜですか？

私はただ反応して、自分で試してみました。画面上でハローワールドを取得するためだけにwebpackを設定して数時間経った後、私はすぐに始められると思ったが、ファイルから別のコンポーネントをレンダリングしようとすると次の問題が発生した。

私のメインファイルはapp.jsで、すべてをレンダリングします。

import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';

ReactDOM.render(
   <Hello/>,
   document.getElementById('app')
);

Helloコンポーネントは、同じフォルダー内のhello.jsから取得されます。

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

export default Hello;

インポート/エクスポートなしでapp.jsだけですべてを行っていたとき、それはうまくレンダリングされていました。また、正常にコンパイルされます。しかし、コンソールには現在多くのエラーがあります。だから私は何が欠けていますか？

ありがとう

ゲルド

javascriptreactjswebpackwebpack-dev-server
8
gerdtf

エクスポートはdefaultであるため、インポートコンポーネント名を中括弧で囲む必要はありません。

import Hello from './hello';

これは詳細な技術記事です 最終的なES6モジュールの構文に関するAxel Rauschmayerの有用な構文です。

そして、ここでは少し技術的な投稿があります 同じトピックについて。

29
Andy

使用するデフォルトクラスをインポートするとき

import ClassName from 'something';

使用する他のクラスをインポートするとき

import {ClassName} from 'something';

例：

hello.jsファイル内

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

class Other extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}
export default Hello;
export Other;

他のファイルに

import Hello, {Other} from './hello';

ヒント：デフォルトクラスを他の名前でインポートすることもできます

import Component, {Other} from './hello';
6
mina sameh