Pourquoi `Export Export Const`` n'est pas valide?

Je vois que ce qui suit est bien:

const Tab = connect( mapState, mapDispatch )( Tabs );
export default Tab;

Cependant, ceci est incorrect:

export default const Tab = connect( mapState, mapDispatch )( Tabs );

C'est pourtant bien:

export default Tab = connect( mapState, mapDispatch )( Tabs );

Cela peut-il être expliqué s'il vous plaît pourquoi constest invalide avec export default? S'agit-il d'un ajout inutile et de tout ce qui est déclaré comme export defaultprésumé consttel ou tel?

constc'est comme let, c'est une LexicalDeclaration ( VariableStatement, Declaration ) utilisée pour définir un identifiant dans votre bloc.

Vous essayez de mélanger cela avec le defaultmot clé, qui attend une HoistableDeclaration, ClassDeclaration ou AssignmentExpression pour le suivre.

C'est donc un SyntaxError .

Si vous voulez constquelque chose, vous devez fournir l'identifiant et ne pas l'utiliser default.

exportaccepte par lui-même une déclaration ou une déclaration variable à sa droite.

AFAIK l'exportation en soi ne devrait rien ajouter à votre portée actuelle.

Ce qui suit est très bienexport default Tab;

Tabdevient un AssignmentExpression car on lui donne le nom par défaut ^?

export default Tab = connect( mapState, mapDispatch )( Tabs ); c'est bien

Voici Tab = connect( mapState, mapDispatch )( Tabs );une AssignmentExpression .

Vous pouvez également faire quelque chose comme ceci si vous souhaitez exporter par défaut un const / let, au lieu de

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

Vous pouvez faire quelque chose comme ça, que je n'aime pas personnellement.

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

Si le nom du composant est expliqué dans le nom du fichier MyComponent.js, ne nommez simplement pas le composant, le code reste mince.

import React from 'react'

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

Mise à jour : Étant donné que cela le marque comme inconnu dans le suivi de pile, il n'est pas recommandé

La réponse de Paul est celle que vous recherchez. Cependant, en pratique, je pense que vous pouvez être intéressé par le modèle que j'utilise dans mes propres applications React + Redux.

Voici un exemple dépouillé de l'un de mes itinéraires, montrant comment vous pouvez définir votre composant et l'exporter par défaut avec une seule instruction:

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 { /* ... */ }

(Remarque: j'utilise le terme «scène» pour le composant de niveau supérieur de n'importe quel itinéraire).

J'espère que ceci est utile. Je pense que c'est beaucoup plus propre que le conventionnelconnect( mapState, mapDispatch )( BareComponent )

La réponse partagée par Paul est la meilleure. Pour étendre davantage,

Il ne peut y avoir qu'une seule exportation par défaut par fichier. Alors qu'il peut y avoir plus d'une exportation const. La variable par défaut peut être importée avec n'importe quel nom, tandis que la variable const peut être importée avec son nom particulier.

var message2 = 'Je suis exporté';

exporter le message par défaut2;

export const message = 'Je suis également exporté'

Du côté des importations, nous devons l'importer comme ceci:

importer {message} depuis './test';

ou

importer un message depuis './test';

Avec la première importation, la variable const est importée tandis qu'avec la seconde, la variable par défaut sera importée.

default est fondamentalement const someVariableName

Vous n'avez pas besoin d'un identifiant nommé, car il s'agit de l'exportation par défaut du fichier et vous pouvez le nommer comme vous le souhaitez lorsque vous l'importez, il defaultsuffit donc de condenser l'affectation des variables en un seul mot-clé.

Pour moi, ce n'est là qu'une des nombreuses idiosyncrasies (l'accent sur l'idio (t)) de dactylographie qui oblige les gens à se coiffer et à maudire les développeurs. Peut-être qu'ils pourraient travailler à trouver des messages d'erreur plus compréhensibles.