cs.react.dev/src/content/learn/importing-and-exporting-components.md at adb3a007846e5fc44a82e6a1d47fb27d6aa81d0a · reactjs/cs.react.dev

title	Importování a exportování komponent

Krása komponent spočívá v jejich znovupoužitelnosti, můžete vytvořit komponentu, která je složená z dalších komponent. Občas dává smysl, že jakmile začnete přidávat více a více komponent, je dobré je rozdělit do více souborů. Toto vede ke snazšímu čtení kódu a větší znovupoužitelnosti jednotlivých komponent.

Co je to kořenová komponenta
Jak importovat a exportovat komponenty
Kdy použít výchozí a kdy jmenný import a export
Jak importovat a exportovat vícero komponent z jednoho souboru
Jak rozdělit komponenty do dalších souborů

Kořenová komponenta {/the-root-component-file/}

V kapitole Vaše první komponenta, byly vytvořeny komponenty Profile a Gallery, která ji rendruje:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

img { margin: 0 10px 10px 0; height: 90px; }

V tomto příkladě jsou komponenty v kořenovém souboru jménem App.js. V Create React App, je aplikace umístěna do src/App.js. V závislosti na projektu může být kořenová komponenta v úplně jiném souboru. Pokud používáte framework s navigací založenou na souborovém systému, jako je třeba Next.js, bude vaše kořenová komponenta jiná pro každou stránku.

Export a import komponent {/exporting-and-importing-a-component/}

Představte si, že chcete na úvodní stránce zobrazit seznam učebnic. Nebo vložit seznam profilů někam jinam. Teď dává smysl přesunout Gallery a Profile mimo kořenový soubor. Tyto komponenty tak budou více modulární a znovupoužitelné i v dalších souborech. Komponenty můžete přesouvat pomocí těchto tří kroků:

Vytvořte nový JS soubor pro komponenty.
Exportujte vaši funkcionální komponentu z tohoto souboru (použitím buď výchozího nebo jmenného exportu).
Importujte ji do souboru, kde se chystáte tuto komponentu použít (použitím korespondující techniky pro import výchozí nebo jmenný import).

Obě komponenty, Profile a Gallery, byly přesunuty mimo soubor App.js do nového souboru Gallery.js. Nyní můžete upravit App.js aby importoval Gallery z Gallery.js:

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

img { margin: 0 10px 10px 0; height: 90px; }

Všimněte si, jak je tento příklad rozdělen do dvou souborů:

Gallery.js:
- Definuje Profile komponentu, která je použita pouze uvnitř tohoto souboru a není exportována.
- Exportuje Gallery komponentu jako výchozí export.
App.js:
- Importuje Gallery přes výchozí import z Gallery.js.
- Exportuje kořenovou komponentu App jako výchozí export.

Můžete si povšimnout, že soubory postrádají příponu .js například tady:

import Gallery from './Gallery';

Obě './Gallery.js' nebo './Gallery' budou fungovat s Reactem, přestože první je blíže tomu, jak nativní ES Moduly fungují.

Výchozí vs. jmenné exporty {/default-vs-named-exports/}

Máme dva hlavní způsoby jak exportovat hodnoty v JavaScriptu, výchozí a jmenný export. Prozatím jsme v našich příkladech používali pouze výchozí exporty. V jednom souboru můžeme použít jeden nebo oba způsoby. Soubor může mít pouze jeden výchozí export, ale může mít několik jmenných exportů.

Druh exportu komponenty určuje jak ji musíte naimportovat. V případě, že se pokusíte importovat výchozí export jako jmenný, dostanete error! Tato tabulka vám pomůže s určením typu:

Syntaxe	Výraz pro export	Výraz pro import
Výchozí	`export default function Button() {}`	`import Button from './Button.js';`
Jmenný	`export function Button() {}`	`import { Button } from './Button.js';`

S výchozím importem můžete za klíčové slovo import vložit jakékoliv jméno. Například můžete napsat import Banana from './Button.js' a stále dostane výchozí export. Na rozdíl od jmenných importů, kde musí jméno odpovídat na obou stranách. Proto se jim říká jmenné importy!

Výchozí export se většinou používá pokud soubor exportuje pouze jednu komponentu. Naopak jmenný export se používá tam, kde se exportuje více komponent nebo hodnot z jednoho souboru. Nehledě jaký programátorský styl preferujete, dávejte komponentám a souborům které je obsahují smysluplné názvy. Bezejmenná komponenta, například export default () => {}, je nežádoucí protože je těžké ji debugovat.

Exportování a importování vícero komponent ze stejného souboru {/exporting-and-importing-multiple-components-from-the-same-file/}

Co když chceme zobrazit pouze Profile namísto galerie? Komponentu Profile lze také vyexportovat. Pozor, soubor Gallery.js již má výchozí export a nemůže mít dva výchozí exporty. Můžete vytvořit nový soubor s výchozím exportem, nebo můžete přidat jmenný export pro komponentu Profile. Soubor může mít pouze jeden výchozí export, ale může mít vícero jmenných exportů!

Pro zjednodušení, se některé týmy rozhodly používat pouze jeden styl (výchozí nebo jmenný) nebo nemíchat tyto styly v jednom souboru. Zařiďte se podle sebe!

Nejprve exportujte Profile z Gallery.js použitím jmenného exportu (bez klíčového slova default):

export function Profile() {
  // ...
}

Poté importujte Profile z Gallery.js do App.js použitím jmenného importu (se složenými závorkami):

import { Profile } from './Gallery.js';

Nakonec vyrenderujte <Profile /> v komponentě App:

export default function App() {
  return <Profile />;
}

Nyní, Gallery.js obsahuje dva exporty, výchozí Gallery a jmenný Profile. App.js importuje oba dva. Zkuste upravit <Profile /> na <Gallery /> a zpět v následujícím příkladu:

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <Profile />
  );
}

export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

img { margin: 0 10px 10px 0; height: 90px; }

Nyní používáte mix výchozích a jmenných exportů:

Gallery.js:
- Exportuje komponentu Profile jako jmenný export Profile.
- Exportuje komponentu Gallery jako výchozí export.
App.js:
- Importuje Profile jako jmenný import Profile z Gallery.js.
- Importuje Gallery jako výchozí import z Gallery.js.
- Exportuje kořenovou komponentu App jako výchozí export.

Na této stránce jste se naučili:

Co je to soubor s kořenovou komponentou
Jak importovat a exportovat komponentu
Kdy a jak použít výchozí a jmenný import a export
Jak exportovat vícero komponent z jednoho souboru

Další rozdělení komponent {/split-the-components-further/}

Nyní, Gallery.js exportuje obě komponenty Profile a Gallery což je trochu matoucí.

Přesuňte komponentu Profile do vlastního souboru Profile.js a změňte komponentu App tak, aby rendrovala obě komponenty <Profile /> a <Gallery /> v tomto pořadí.

Můžete použít buďto výchozí nebo jmenný export pro Profile, ale ujistěte se, že použijete korespondující syntaxi pro import v obou souborech App.js a Gallery.js! Můžete se podívat na tabulku z rozboru výše:

Syntaxe	Výraz pro export	Výraz pro import
Výchozí	`export default function Button() {}`	`import Button from './Button.js';`
Jmenný	`export function Button() {}`	`import { Button } from './Button.js';`

Nezapomeňte naimportovat vaše komponenty tam, kde je voláte. Nepoužívá komponenta Gallery komponentu Profile také?

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <div>
      <Profile />
    </div>
  );
}

// Přesuň mne do Profile.js!
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

img { margin: 0 10px 10px 0; height: 90px; }

Jakmile to zvládnete s jedním typem exportu, zkuste to i s druhým.

Toto je řešení s využitím jmenných exportů:

import Gallery from './Gallery.js';
import { Profile } from './Profile.js';

export default function App() {
  return (
    <div>
      <Profile />
      <Gallery />
    </div>
  );
}

import { Profile } from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

img { margin: 0 10px 10px 0; height: 90px; }

Toto je řešení s využitím výchozí exportů:

import Gallery from './Gallery.js';
import Profile from './Profile.js';

export default function App() {
  return (
    <div>
      <Profile />
      <Gallery />
    </div>
  );
}

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

img { margin: 0 10px 10px 0; height: 90px; }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kořenová komponenta {/the-root-component-file/}

Export a import komponent {/exporting-and-importing-a-component/}

Výchozí vs. jmenné exporty {/default-vs-named-exports/}

Exportování a importování vícero komponent ze stejného souboru {/exporting-and-importing-multiple-components-from-the-same-file/}

Další rozdělení komponent {/split-the-components-further/}

FilesExpand file tree

importing-and-exporting-components.md

Latest commit

History

importing-and-exporting-components.md

File metadata and controls

Kořenová komponenta {/the-root-component-file/}

Export a import komponent {/exporting-and-importing-a-component/}

Výchozí vs. jmenné exporty {/default-vs-named-exports/}

Exportování a importování vícero komponent ze stejného souboru {/exporting-and-importing-multiple-components-from-the-same-file/}

Další rozdělení komponent {/split-the-components-further/}