Tại sao thành phần phản ứng es6 chỉ hoạt động với "mặc định xuất"?

Question

Thành phần này hoạt động:

export class Template extends React.Component { 
    render() { 
     return (
      <div> component </div> 
     ); 
    } 
}; 
export default Template; 

Nếu tôi xóa hàng cuối cùng, nó không hoạt động.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined 

Tôi đoán, tôi không hiểu điều gì đó bằng cú pháp es6. Nó không phải xuất khẩu mà không có dấu "mặc định"?

Answer 1

Xuất mà không có default có nghĩa là "xuất có tên". Bạn có thể có nhiều tên được đặt trong một tệp. Vì vậy, nếu bạn làm điều này,

export class Template {} 
export class AnotherTemplate {} 

thì bạn phải nhập các xuất này bằng tên chính xác của chúng. Vì vậy, để sử dụng các thành phần này trong tập tin khác, bạn sẽ phải làm,

import {Template, AnotherTemplate} from './components/templates' 

Ngoài ra nếu bạn xuất như việc xuất khẩu default như thế này,

export default class Template {} 

Sau đó trong tập tin khác bạn nhập xuất khẩu mặc định mà không sử dụng số {}, như thế này,

import Template from './components/templates' 

Chỉ có thể xuất một lần mặc định cho mỗi tệp. Trong React, nó là một quy ước để xuất một thành phần từ một tệp và xuất nó là xuất khẩu mặc định.

Bạn đang miễn phí để đổi tên xuất khẩu mặc định khi bạn nhập nó,

import TheTemplate from './components/templates' 

Và bạn có thể nhập mặc định và đặt tên là kim ngạch xuất khẩu cùng một lúc,

import Template,{AnotherTemplate} from './components/templates'