Dlaczego` Export Default Const ' jest niepoprawny?

Możesz również zrobić coś takiego, jeśli chcesz wyeksportować domyślnie const / let, zamiast

const MyComponent = ({ attr1, attr2 }) => (<p>Now Export On other Line</p>);
export default MyComponent

let MyComponent;
export default MyComponent = ({ }) => (<p>Now Export On SameLine</p>);

Paul 's answer is the one you' re looking for. Jednak, w praktyce, myślę, że może Cię zainteresować wzór, którego używam w moich własnych aplikacjach React + Redux.

Oto okrojony przykład z jednej z moich tras, pokazujący, jak można zdefiniować komponent i wyeksportować go jako domyślny za pomocą pojedynczej instrukcji:

import React from 'react';
import { connect } from 'react-redux';

@connect((state, props) => ({
    appVersion: state.appVersion
    // other scene props, calculated from app state & route props
}))
export default class SceneName extends React.Component { /* ... */ }

(Uwaga: używam terminu "Scena" dla najwyższego poziomu komponentu dowolnej trasy).

Jeśli nazwa komponentu jest wyjaśniona w nazwie pliku MyComponent.js, po prostu nie nazywaj komponentu, zachowaj wąski kod.

import React from 'react'

export default (props) =>
    <div id='static-page-template'>
        {props.children}
    </div>

Odpowiedź udostępniona przez Pawła jest najlepsza. Aby rozwinąć więcej,

Dla każdego pliku może być tylko jeden domyślny eksport. Natomiast może być więcej niż jeden eksport const. Domyślna zmienna może być importowana z dowolną nazwą, natomiast zmienna const może być importowana z dowolną nazwą.

Var message2 = 'jestem eksportowany';

Export default message2;

Export const message = 'I am also exported'

Po stronie importu musimy importować jak to:

Import {wiadomość} z"./ test";

LUB

Import wiadomości z"./ test";

Przy pierwszym imporcie importowana jest zmienna const, podczas gdy przy drugim importowana jest domyślna.