Tại sao thành phần phản ứng es6 chỉ hoạt động với dịch vụ xuất khẩu mặc định của Cameron?

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

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

Nếu tôi loại bỏ 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 gì về cú pháp es6. Không phải nó phải xuất mà không có dấu "mặc định" sao?

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

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

sau đó bạn phải nhập các hàng xuất khẩu 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 một tệp khác bạn phải làm,

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

Ngoài ra, nếu bạn xuất dưới dạng defaultxuất như thế này,

export default class Template {}

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

import Template from './components/templates'

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

Bạn có thể đổ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 xuất khẩu mặc định và được đặt tên cùng một lúc,

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

Thêm {} trong khi nhập và xuất: export { ... };| import { ... } from './Template';

xuất →import { ... } from './Template'

xuất mặc định →import ... from './Template'

Dưới đây là một ví dụ hoạt động:

// ExportExample.js
import React from "react";

function DefaultExport() {
  return "This is the default export";
}

function Export1() {
  return "Export without default 1";
}

function Export2() {
  return "Export without default 2";
}

export default DefaultExport;
export { Export1, Export2 };

// App.js
import React from "react";
import DefaultExport, { Export1, Export2 } from "./ExportExample";

export default function App() {
  return (
    <>
      <strong>
        <DefaultExport />
      </strong>
      <br />
      <Export1 />
      <br />
      <Export2 />
    </>
  );
}

Làm việc với hộp cát để chơi xung quanh: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavlation=1&theme=dark