javascript - multiple - ¿Por qué es inválido `Exportar const.

import export default es6

Question

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 esto por qué const no es válido con export default ? ¿Es una adición innecesaria y cualquier cosa declarada como export default se presume una const o tal?

Answer 1

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

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

var message2 = ''Estoy exportado'';

exportar mensaje predeterminado2;

export const message = ''También estoy exportado''

En el lado de las importaciones, necesitamos importarlo así:

importar {mensaje} desde ''./test'';

o

importar mensaje de ''./test'';

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

Answer 2

La respuesta de Paul es la que estás buscando. Sin embargo, como cuestión práctica, creo que puede estar interesado en el patrón que he estado usando en mis propias aplicaciones React + Redux.

Aquí hay un ejemplo simplificado de una de mis rutas, que muestra cómo puede definir su componente y exportarlo como predeterminado con una sola declaración:

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

(Nota: uso el término "Escena" para el componente de nivel superior de cualquier ruta).

Espero que esto sea útil. Creo que tiene un aspecto mucho más limpio que la connect( mapState, mapDispatch )( BareComponent ) convencional connect( mapState, mapDispatch )( BareComponent )

Answer 3

Si el nombre del componente se explica en el nombre del archivo MyComponent.js , simplemente no nombre el componente, mantiene el código delgado.

import React from ''react''

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

Answer 4

También puede hacer algo como esto si desea 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 como esto, que no me gusta personalmente.

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

Answer 5

const es como let , es una Declaración Lexical ( Declaración de Variable, Declaración ) utilizada para definir un identificador en su bloque.

Está intentando mezclar esto con la palabra clave default , que espera que una declaración HoistableDeclaration, ClassDeclaration o AssignmentExpression lo siga.

Por lo tanto, es un SyntaxError .

Si desea const algo, debe proporcionar el identificador y no utilizar el default .

export por sí mismo acepta una Declaración de Variable o Declaración a su derecha.

AFAIK la exportación en sí misma no debería agregar nada a su alcance actual.

Lo siguiente es una export default Tab; fina export default Tab;

Tab convierte en AssignmentExpression ya que se le asigna el nombre predeterminado ^?

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

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