Co robi "eksport domyślny" w JSX?

Question

Chcę zapytać, co znaczy ostatnie sentance i zrobić (domyślny eksport HelloWorld;) nie można znaleźć w samouczkach na ten temat.

// hello-world.jsx 

import React from 'react'; 

class HelloWorld extends React.Component { 
    render() { 
    return <p>Hello, world!</p>; 
    } 
} 

export default HelloWorld; 

Answer 1

Export jak export default HelloWorld; i import, jak import React from 'react' są częścią ES6 modules system.

Moduł to samodzielna jednostka, która może eksponować aktywa na inne moduły za pomocą export, a także nabywać aktywa z innych modułów przy użyciu import.

W kodzie:

import React from 'react'; // get the React object from the react module 

class HelloWorld extends React.Component { 
    render() { 
    return <p>Hello, world!</p>; 
    } 
} 

export default HelloWorld; // expose the HelloWorld component to other modules 

W ES6 istnieją dwa rodzaje eksportu:

nazwane eksport - np export function func() {} jest nazwany eksport z nazwą func. Wymienione moduły mogą być importowane za pomocą import { exportName } from 'module';.. W takim przypadku nazwa importu powinna być taka sama, jak nazwa eksportu, więc aby zaimportować func w tym przykładzie, musisz użyć import { func } from 'module';. W jednym module może być wiele nazwanych eksportów.

Domyślny eksport - jest wartością, która zostanie zaimportowana z modułu, jeśli użyjesz prostej instrukcji importowej import X from 'module'. X to nazwa, która zostanie podana lokalnie do zmiennej przypisanej do tej wartości i nie musi być nazwana tak jak eksport pochodzenia. Może istnieć tylko jeden domyślny eksport.

Moduł może zawierać zarówno wyeksportowane nazwy, jak i eksport domyślny i można je importować razem za pomocą import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.