Búsqueda de sitios web

javascript - ¿Por qué es inválido `Export Default Const`?

Veo que lo siguiente está bien:

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

Sin embargo, esto es incorrecto:

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

Sin embargo, esto está bien:

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

¿Se puede explicar por favor por qué const es inválido con export default? ¿Es una adición innecesaria y todo lo declarado como export default se presume un const o algo así?

Respuesta #1

const es como let, es una LexicalDeclaration (VariableStatement, Declaration) utilizada para definir un identificador en tu bloque.

Estás intentando mezclar esto con la palabra clave default, que espera que le siga una HoistableDeclaration, ClassDeclaration o AssignmentExpression.

Por lo tanto, es un SyntaxError.

Si quieres const algo, necesitas proporcionar el identificador y no usar default.

export por sí solo acepta una VariableStatement o Declaration a su derecha.

Lo siguiente está bienexport default Tab;

Tab se convierte en una AssignmentExpression al que se le da el nombre default ?

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

Aquí Tab=connect( mapState, mapDispatch )( Tabs ); es una AssignmentExpression.

Actualización: Una forma diferente de imaginar el problema

Si estás tratando de entender esto conceptualmente y la razón basada en la especificación anterior no ayuda, piénsalo como "si default fuera un identificador legal y no un token reservado, ¿cuál sería una forma diferente de escribir export default Foo; y export default const Foo=1;?"

En esta situación, la forma ampliada de escribirlo sería

// pseudocode, this thought experiment is not valid JS

export default Foo;
// would be like
export const default = Foo;

export default const Foo = 1;
// would be like
export const default const Foo = 1;
// so would the following line make sense?
const bar const Foo = 1;

Hay un argumento válido de que la expansión debería ser algo así como

// pseudocode, this thought experiment is not valid JS

export default const Foo = 1;
// would be like
const Foo = 1;
export const default = Foo;

Sin embargo, esto se volvería ambiguo según el comentario de Sergey, por lo que tiene más sentido escribir este patrón explícitamente en su lugar.

Respuesta #2

También puedes hacer algo así si quieres exportar por defecto un const/let, en lugar de

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

Puedes hacer algo así, lo cual personalmente no me gusta.

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

Respuesta #3

Si el nombre del componente está explicado en el nombre del archivo MyComponent.js, simplemente no nombres el componente, mantiene el código ligero.

import React from 'react'

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

Actualización: Dado que esto lo etiqueta como desconocido en el rastreo de la pila, no se recomienda

Actualización 2: Solo he estado usando la versión es5 a continuación, ya que mantiene los nombres en los rastros de la pila y en las herramientas de desarrollo de React.

import React from 'react'

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

Respuesta #4

La respuesta compartida por Paul es la mejor. Para expandir más,

Solo puede haber una exportación predeterminada por archivo. Mientras que puede haber más de una exportación const. La variable predeterminada se puede importar con cualquier nombre, mientras que la variable const se puede importar con su nombre particular.

var message2 = 'I am exported';
export default message2;
export const message = 'I am also exported'

En el lado de las importaciones necesitamos importarlo así:

import { message } from './test';

o

import message from './test';

Con la primera importación, se importa la variable const, mientras que, con la segunda, se importará la predeterminada.

Respuesta #5

Con export default, no exportas el nombre de, en este caso, la variable.

incorrecto :

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

derecha :

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

Puedes importarlo con cualquier nombre que quieras

Respuesta #6

En resumen

JavaScript no soporta export default junto con const.
export default se puede usar junto con expresiones, funciones y clases.

Incorrecto :

export default const a = 10, b = 20;

Es porque no podemos identificar cuál es el predeterminado entre a y b en el momento de la importación.

Correcto

const a = 10, b = 20;
export default a;

O simplemente

No uses default con const:

export const a = 10, b = 20;

Nota: Aunque solo se permite 1 export default en un módulo de JavaScript, se permiten múltiples exportaciones.

Referencia

Artículos relacionados