¿Por qué no es válida la opción 'Exportar configuración predeterminada'?

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 );

¿Puede esto explicarse por qué constno es válido export default? ¿Es una adición innecesaria y algo declarado como export defaultse presume una consto tal?

constes 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 defaultpalabra clave, que espera que una declaración HoistableDeclaration, ClassDeclaration o AssignmentExpression lo siga.

Por lo tanto, es un SyntaxError .

Si desea constalgo, debe proporcionar el identificador y no usarlo default.

exportpor sí mismo acepta una Declaración 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 está bienexport default Tab;

Tabse convierte en AssignmentExpression ya que recibe el nombre predeterminado ^?

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

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

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>);

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>

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

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 es mucho más limpio que el convencional.connect( mapState, mapDispatch )( BareComponent )

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 su nombre particular.

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.

default es básicamente const someVariableName

No necesita un identificador con nombre porque es la exportación predeterminada para el archivo y puede defaultasignarle el nombre que desee cuando lo importe, por lo que solo se condensa la asignación de variables en una sola palabra clave.

Para mí, esta es solo una de las muchas idiosincrasias (énfasis en el idio (t)) del mecanografiado que hace que las personas se quiten el pelo y maldigan a los desarrolladores. Tal vez podrían trabajar para generar mensajes de error más comprensibles.