web-dev-qa-db-ja.com

React：export const + export default vs 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

追伸：現在のコードは、後でwebpack2にバンドルされています。

reactjswebpackecmascript-6
13
volna

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

import Homeview

そして

import { Homeview }

同じモジュール（HomeViewコンポーネント）を提供します。

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

export const HomeView ...

export default connect(mapStateToProps)(HomeView);

これは、Reduxに接続されていないコンポーネントを時々使用したり、テストに必要になる可能性があるという点で便利です。

18
Andy_D