☰

React: export const + export default と export default の違い 質問する

tag-icon • tag-icon reactjs webpack ecmascript-6
React: export const + export default と export default の違い 質問する

「二重」エクスポートによる現在のコンポーネント作成に遭遇しました。それが実際に使用されるのか、それとも単に作成者の好みなのかを説明していただけますか?

import React from 'react'
import DuckImage from '../assets/Duck.jpg'
import './HomeView.scss'

export const HomeView = () => (
  <div>
    <h4>Welcome!</h4>
    <img
      alt='This is a duck, because Redux!'
      className='duck'
      src={DuckImage} />
  </div>
)

export default HomeView

PS: 現在のコードは後で webpack2 によってバンドルされます。

ベストアンサー1

この場合、2つのエクスポートは同じものをエクスポートしています。

import Homeview

そして

import { Homeview }

同じモジュール (HomeView コンポーネント) が提供されます。

ただし、Redux を使用しているようです。もしあなたはこんなことをしていた

export const HomeView ...

export default connect(mapStateToProps)(HomeView);

これは、Redux に接続されていないコンポーネントを時々使用したい場合や、テストに必要になる場合に役立ちます。

おすすめ記事