web-dev-qa-db-fra.com

Pourquoi `Export Default Const` est-il invalide?

Je vois que ce qui suit va bien:

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

Cependant, ceci est incorrect:

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

Pourtant c'est bien:

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

Est-ce que ceci peut être expliqué s'il vous plaît, pourquoi const n'est pas valide avec export default? Est-ce un ajout inutile et quelque chose déclaré comme export default est présumé être une const ou telle?

javascriptscopeexportconstdefault
262
Kayote

const est comme let, c'est un LexicalDeclaration ( VariableStatement, Declaration) permet de définir un identifiant dans votre bloc.

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

Par conséquent, il s'agit d'un SyntaxError.

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

export accepte par lui-même un VariableStatement ​​ou Déclaration.

Autant que je sache, l'exportation en elle-même ne doit rien ajouter à votre portée actuelle.

Ce qui suit est bienexport default Tab;

Tab devient un AssignmentExpression car son nom est défaut ?

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

Ici, Tab = connect( mapState, mapDispatch )( Tabs ); est un AssignmentExpression.

241
Paul S.

Vous pouvez aussi faire quelque chose comme ça si vous voulez 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>);
39
Adeel Imran

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

import React from 'react'

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

La réponse de Paul est celle que vous recherchez. Toutefois, sur le plan pratique, je pense que le motif que j'ai utilisé dans mes propres applications React + Redux pourrait vous intéresser.

Voici un exemple de l'une de mes routes, 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 désigner le composant de niveau supérieur d'un itinéraire).

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

7
Tom

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

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

var message2 = 'Je suis exporté';

export default message2;

export const message = 'Je suis aussi exporté'

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

importer {message} de './test';

ou

importer le message de './test';

Lors de la première importation, la variable const est importée, tandis que pour la seconde, la variable par défaut est importée.

3
Bharat Raj

Pour moi, il ne s’agit que d’une des nombreuses particularités (l’accent mis sur idio (t)) de TypeScript qui amène les gens à se dénuder et à maudire les développeurs. Ils pourraient peut-être travailler à la création de messages d'erreur plus compréhensibles.

0
Big Dog