เหตุใดส่วนประกอบของปฏิกิริยาตอบสนอง es6 จึงทำงานได้กับ“ การส่งออกเริ่มต้น” เท่านั้น

องค์ประกอบนี้ใช้งานได้:

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

หากฉันลบแถวสุดท้ายออกจะไม่ทำงาน

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

ฉันเดาว่าฉันไม่เข้าใจบางสิ่งในไวยากรณ์ es6 ไม่จำเป็นต้องส่งออกโดยไม่มีเครื่องหมาย "ค่าเริ่มต้น" ใช่หรือไม่

การส่งออกโดยไม่ได้defaultหมายความว่าเป็น "การส่งออกที่มีชื่อ" คุณสามารถมีการส่งออกที่ระบุชื่อหลายรายการในไฟล์เดียว ดังนั้นถ้าคุณทำสิ่งนี้

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

จากนั้นคุณต้องนำเข้าการส่งออกเหล่านี้โดยใช้ชื่อที่แน่นอน ดังนั้นในการใช้ส่วนประกอบเหล่านี้ในไฟล์อื่นที่คุณต้องทำ

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

หรือถ้าคุณส่งออกเป็นการdefaultส่งออกเช่นนี้

export default class Template {}

จากนั้นในไฟล์อื่นคุณนำเข้าการส่งออกเริ่มต้นโดยไม่ใช้{}, เช่นนี้,

import Template from './components/templates'

สามารถส่งออกเริ่มต้นหนึ่งไฟล์ต่อหนึ่งไฟล์เท่านั้น ใน React เป็นการประชุมที่จะส่งออกองค์ประกอบหนึ่งจากไฟล์และการส่งออกนั้นเป็นการส่งออกเริ่มต้น

คุณมีอิสระที่จะเปลี่ยนชื่อการส่งออกเริ่มต้นเมื่อคุณนำเข้า

import TheTemplate from './components/templates'

และคุณสามารถนำเข้าการส่งออกเริ่มต้นและตั้งชื่อพร้อมกัน

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

เพิ่ม {} ขณะนำเข้าและส่งออก: export { ... };| import { ... } from './Template';

ส่งออก →import { ... } from './Template'

ส่งออกเริ่มต้น →import ... from './Template'

นี่คือตัวอย่างการทำงาน:

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

⚡️การทำงานกับแซนด์บ็อกซ์เพื่อเล่น: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark