javascript - page - vue title bind



Por que o `Export Default Const` é inválido? (4)

A resposta compartilhada por Paulo é a melhor. Para expandir mais,

Pode haver apenas uma exportação padrão por arquivo. Considerando que pode haver mais de uma const exportações. A variável padrão pode ser importada com qualquer nome, enquanto a variável const pode ser importada com qualquer nome.

var message2 = 'Eu sou exportado';

exportar message2 padrão;

export const message = 'Eu também sou exportado'

No lado das importações, precisamos importá-lo assim:

import {message} de './test';

ou

importar mensagem de './test';

Com a primeira importação, a variável const é importada, enquanto, com a segunda, a padrão é importada.

Vejo que o seguinte é bom:

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

No entanto, isso está incorreto:

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

No entanto, isso é bom:

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

Isso pode ser explicado, por que const é inválido com export default ? É uma adição desnecessária e qualquer coisa declarada como export default é presumida como uma const ou algo assim?


Answer #1

A resposta de Paulo é a que você está procurando. No entanto, por uma questão prática, acho que você pode estar interessado no padrão que tenho usado em meus próprios aplicativos React + Redux.

Aqui está um exemplo simplificado de uma das minhas rotas, mostrando como você pode definir seu componente e exportá-lo como padrão com uma única instrução:

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: eu uso o termo "Cena" para o componente de nível superior de qualquer rota).

Espero que isto seja útil. Eu acho que é muito mais limpo do que a connect( mapState, mapDispatch )( BareComponent ) convencional connect( mapState, mapDispatch )( BareComponent )


Answer #2

Se o nome do componente for explicado no nome do arquivo MyComponent.js , apenas não o nomeie, mantendo o código reduzido.

import React from 'react'

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

Answer #3

Você também pode fazer algo assim se desejar exportar uma const / let padrão, em vez de

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

Você pode fazer algo assim, que eu não gosto pessoalmente.

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




default