2017-02-20 13 views
6

Я столкнулся с созданием текущего компонента с «двойным» экспортом. Не могли бы вы объяснить, действительно ли это используется, или это просто предпочтение автора?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 

P.S: Текущий код позже в комплекте с webpack2.

+0

Они экспортируют его как постоянную константу и как константу по умолчанию, поэтому вы можете импортировать ее либо с помощью 'import HomeView из файла '' или 'import {HomeView} из" file "'. – Li357

+1

Экспорт по умолчанию позволяет использовать такие вещи, как 'import React from 'react''. экспорт без по умолчанию требует '{}', например. 'import {React} из 'react''. У вас может быть только 1 по умолчанию для файла –

ответ

11

В этом случае оба экспорта экспортируют одно и то же. Оба

import Homeview 

И

import { Homeview } 

Даст вам тот же модуль (компонент HomeView).

Я вижу, что вы используете Redux. Если вы делали что-то вроде

export const HomeView ... 

export default connect(mapStateToProps)(HomeView); 

Это может быть полезно в том, что вы можете использовать не-Redux-связную компоненту иногда, или может понадобиться для тестирования.

+0

Этот последний бит является хорошим моментом. Не только Redux, но и если вы хотите добавить «PropTypes» React в функцию. – CodingIntrigue