Import nazwany w JavaScript

Słownik kwalifikacji INF.04 - Projektowanie, programowanie i testowanie aplikacji

Import nazwany służy do pobierania z modułu konkretnego elementu wyeksportowanego pod daną nazwą. W składni ES Modules używa się do tego nawiasów klamrowych { }.

Składnia

import { nazwa } from 'modul';

Jeżeli moduł eksportuje kilka funkcji, klas lub stałych, można zaimportować tylko wybrane:

import { Component } from 'react';

W tym przykładzie z biblioteki react importowany jest tylko element o nazwie Component. Dlatego poprawna odpowiedź w pytaniu to:

import { Component } from 'react';

Import nazwany a import domyślny

Import nazwany różni się od importu domyślnego.

Import domyślny:

import React from 'react';

Import nazwany:

import { Component } from 'react';

W imporcie domyślnym nie używa się nawiasów klamrowych. W imporcie nazwanym nawiasy klamrowe są obowiązkowe, ponieważ wskazują konkretną nazwę eksportowaną przez moduł.

Typowe błędy

Niepoprawne przykłady:

import React.Component from 'react';
import [ Component ] from 'react';
import Component from 'react';

Pierwszy zapis jest błędny składniowo. Drugi używa nawiasów kwadratowych, które nie służą do importu. Trzeci oznacza import domyślny, a nie import konkretnego elementu Component.

Zapamiętaj

Jeżeli chcesz zaimportować konkretną nazwę z modułu, użyj:

import { Element } from 'modul';