Pourquoi 'Export Default Const' n'est-il 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 );
Pourtant, c'est bien:
export default Tab = connect( mapState, mapDispatch )( Tabs );
Peut-on expliquer pourquoi const est invalide avec export default? Est-ce un ajout inutile et tout ce qui est déclaré comme {[4] } est présumé const ou tel?
5 réponses
const c'est comme let, il est un LexicalDeclaration (VariableStatement, Déclaration) utilisé pour définir un identifiant dans votre bloc.
Vous essayez de le mélanger avec le default clé, qui s'attend à un HoistableDeclaration, ClassDeclaration ou AssignmentExpression pour le suivre.
C'est donc une SyntaxError.
Si vous voulez const quelque chose que vous besoin de fournir l'identifiant et ne pas utiliser default.
export par lui-même accepte un VariableStatement ou Déclaration de à sa droite.
AFAIK l'exportation en elle-même ne devrait rien ajouter à votre portée actuelle.
Ce qui suit est bien
export default Tab;
Tab devient un AssignmentExpression, comme il est donné le nom de par défaut ?
export default Tab = connect( mapState, mapDispatch )( Tabs );est très bien
Ici Tab = connect( mapState, mapDispatch )( Tabs ); est une AssignmentExpression .
Vous pouvez également faire quelque chose comme ceci 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>);
La réponse de Paul est celle que vous cherchez. Cependant, en pratique, je pense que vous pourriez être intéressé par le modèle que j'ai utilisé dans mes propres applications React+Redux.
Voici un exemple dépouillé d'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 le composant de niveau supérieur de n'importe quel itinéraire).
J'espère que cela est utile. Je pense que c'est beaucoup plus propre que le conventionnel connect( mapState, mapDispatch )( BareComponent )
Si le nom du composant est expliqué dans le nom de fichier MyComponent.js, ne nommez pas le composant, gardez le code mince.
import React from 'react'
export default (props) =>
<div id='static-page-template'>
{props.children}
</div>
La réponse partagée par Paul est la meilleure. Pour développer plus,
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, alors que la variable const peut être importée avec n'importe quel nom.
Var message2 = 'je suis exporté';
Exporter le message par défaut2;
Exportation const message = 'je suis également exporté'
Du côté des importations, nous devons l'importer comme ceci:
Importer { message} depuis './ test";
Ou
Importer le message de './ test";
Avec la première importation, la variable const est importée alors que, avec la seconde, la variable par défaut sera importée.