Tại sao `Xuất mặc định Const` không hợp lệ?

Tôi thấy rằng sau đây là tốt:

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

Tuy nhiên, điều này không chính xác:

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

Tuy nhiên, điều này là tốt:

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

Điều này có thể được giải thích tại sao constkhông hợp lệ export default? Đây có phải là một bổ sung không cần thiết & bất cứ điều gì được tuyên bố là export defaultđược coi là constnhư vậy hay không?

constgiống như let, nó là một LexicalDeclaration ( Var biếnStatement , Declaration ) được sử dụng để xác định một định danh trong khối của bạn.

Bạn đang cố gắng để kết hợp điều này với các defaulttừ khóa, mà hy vọng một HoistableDeclaration, ClassDeclaration hoặc AssignmentExpression theo nó.

Do đó, nó là một SyntaxError .

Nếu bạn muốn constmột cái gì đó bạn cần cung cấp định danh và không sử dụng default.

exporttự nó chấp nhận một Var biếnStatement hoặc Tuyên bố ở bên phải của nó.

Bản thân AFAIK không nên thêm bất cứ thứ gì vào phạm vi hiện tại của bạn.

Sau đây là tốtexport default Tab;

Tabtrở thành một AssignExpression vì nó được đặt tên mặc định ^?

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

Đây Tab = connect( mapState, mapDispatch )( Tabs );là một AssignExpression .

Bạn cũng có thể làm một cái gì đó như thế này nếu bạn muốn xuất mặc định một const / let, thay vì

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

Bạn có thể làm một cái gì đó như thế này, mà tôi không thích cá nhân.

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

Nếu tên thành phần được giải thích trong tên tệp MyComponent.js, chỉ cần không đặt tên thành phần, giữ cho mã mỏng.

import React from 'react'

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

Cập nhật : Vì nhãn này không xác định trong theo dõi ngăn xếp, nên không được đề xuất

Câu trả lời của Paul là người bạn đang tìm kiếm. Tuy nhiên, như một vấn đề thực tế, tôi nghĩ rằng bạn có thể quan tâm đến mẫu tôi đã sử dụng trong các ứng dụng React + Redux của riêng tôi.

Đây là một ví dụ rút gọn từ một trong các tuyến của tôi, cho thấy cách bạn có thể xác định thành phần của mình và xuất thành mặc định với một câu lệnh:

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

(Lưu ý: Tôi sử dụng thuật ngữ "Cảnh" cho thành phần cấp cao nhất của bất kỳ tuyến đường nào).

Tôi hy vọng điều này là hữu ích. Tôi nghĩ rằng nó trông gọn gàng hơn nhiều so với thông thườngconnect( mapState, mapDispatch )( BareComponent )

Câu trả lời được chia sẻ bởi Paul là câu trả lời hay nhất. Để mở rộng hơn,

Chỉ có thể xuất một mặc định cho mỗi tệp. Trong khi đó có thể có nhiều hơn một const xuất khẩu. Biến mặc định có thể được nhập với bất kỳ tên nào, trong khi đó biến const có thể được nhập với tên cụ thể của nó.

var message2 = 'Tôi đang xuất';

xuất thông báo mặc định2;

export const message = 'Tôi cũng đang xuất'

Ở phía nhập khẩu, chúng ta cần nhập nó như thế này:

nhập {tin nhắn} từ './test';

hoặc là

nhập tin nhắn từ './test';

Với lần nhập đầu tiên, biến const được nhập trong khi với biến thứ hai, biến mặc định sẽ được nhập.

default về cơ bản là const someVariableName

Bạn không cần một mã định danh được đặt tên bởi vì đó là xuất mặc định cho tệp và bạn có thể đặt tên cho bất cứ thứ gì bạn muốn khi bạn nhập nó, vì vậy defaultchỉ cần cô đọng việc gán biến thành một từ khóa duy nhất.

Đối với tôi đây chỉ là một trong nhiều điều bình dị (nhấn mạnh vào idio (t)) của bản thảo khiến mọi người phải nhổ tóc và nguyền rủa các nhà phát triển. Có lẽ họ có thể làm việc với các thông báo lỗi dễ hiểu hơn.