Nauka Reacta
Opisywanie UI

JavaScript w JSX a nawiasy klamrowe

JSX pozwala na pisanie kodu podobnego do HTML-a wewnątrz pliku javascriptowego, umożliwiając trzymanie logiki renderowania i treści jednym miejscu. Czasem jednak zachodzi potrzeba, by w kodzie znaczników dodać nieco logiki javascriptowej lub odnieść się do dynamicznej własności. W takiej sytuacji możemy użyć nawiasów klamrowych, otwierając tym samym okno do świata JavaScriptu.

W tej sekcji dowiesz się

  • Jak przekazywać tekst w cudzysłowie
  • Jak odwoływać się do zmiennej javascriptowej w JSX za pomocą nawiasów klamrowych
  • Jak wywołać funkcję javascriptową w JSX za pomocą nawiasów klamrowych
  • Jak używać obiektów javascriptowych w JSX za pomocą nawiasów klamrowych

Przekazywanie tekstu w cudzysłowie

Kiedy chcemy przekazać do komponentu atrybut tekstowy, umieszczamy wartość w pojedynczym lub podwójnym cudzysłowie:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

W powyższym kodzie wartości "https://i.imgur.com/7vQD0fPs.jpg" oraz "Gregorio Y. Zara" są przekazywane jako tekst.

Lecz co jeśli wartości dla src lub alt mają być dynamiczne? Możemy w takiej sytuacji użyć wartości z JavaScriptu, zastępując parę " i " nawiasami klamrowymi { i }:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Zwróć uwagę na różnicę pomiędzy właściwością className="avatar", która określa użycie klasy CSS-owej o nazwie "avatar" służącej do zaokrąglenia obrazka, a src={avatar}, która przekazuje wartość zmiennej javascriptowej o nazwie avatar. Dzieje się tak, ponieważ nawiasy klamrowe pozwalają korzystać z JavaScriptu w samym kodzie znaczników!

Używanie nawiasów klamrowych: okno na świat JavaScriptu

Składnia JSX to jedynie inny sposób zapisu kodu javascriptowego. Oznacza to, że możemy z powodzeniem używać w niej samego JavaScriptu, pod warunkiem, że otoczymy go nawiasami klamrowymi { }. W poniższym przykładzie najpierw deklarujemy nazwę naukowca, name, a następnie osadzamy ją w nawiasach klamrowych wewnątrz znacznika <h1>:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name} - lista zadań</h1>
  );
}

Spróbuj zmienić wartość zmiennej name z 'Gregorio Y. Zara' na 'Hedy Lamarr'. Widzisz, jak zmienia się tytuł listy zadań?

Pomiędzy nawiasami klamrowymi można umieszczać dowolne wyrażenie z języka JavaScript, nawet wywołania funkcji, jak np. formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>Lista zadań na dzień {formatDate(today)}</h1>
  );
}

Gdzie używać nawiasów klamrowych

W składni JSX można używać nawiasów klamrowych na dwa sposoby:

  1. Jako treść bezpośrednio wewnątrz znacznika JSX-owego: <h1>{name} - lista zadań</h1> działa, ale <{tag}>Gregorio Y. Zara - lista zadań</{tag}> już nie.
  2. Jako atrybuty, zaraz po znaku =: src={avatar} przekaże wartość zmiennej avatar, ale src="{avatar}" już przekaże tekst {avatar}.

Używanie “podwójnych klamerek”: CSS i inne obiekty w JSX

Poza tekstem, liczbami i innymi wyrażeniami javascriptowymi, w JSX można przekazywać także obiekty. W JavaScripcie obiekty same w sobie mają zapis używający klamer, np. { name: "Hedy Lamarr", inventions: 5 }. Z tego powodu, aby przekazać obiekt w JSX-ie, musisz otoczyć go kolejną parą nawiasów klamrowych: person={{ name: "Hedy Lamarr", inventions: 5 }}.

Możesz spotkać się z tym zapisem przy okazji stylów CSS użytych bezpośrednio w kodzie JSX. React nie wymaga pisania styli w kodzie (dla większości przypadków wystarczą zwykłe klasy CSS-owe), ale jeśli potrzebujesz przekazać style w kodzie, przekaż obiekt do atrybutu style:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Usprawnić wideotelefon</li>
      <li>Przygotować wykłady o aeronautyce</li>
      <li>Opracować silnik napędzany alkoholem</li>
    </ul>
  );
}

Spróbuj zmienić wartości backgroundColor i color.

Aby obiekt javascriptowy w klamrach stał się jeszcze bardziej widoczny, możesz zapisać to tak:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

Następnym razem, gdy zobaczysz w JSX-ie parę {{ i }}, przypomnij sobie, że to nic więcej jak zwykły obiekt zapisany wewnątrz JSX-owych nawiasów klamrowych!

Zwróć uwagę

Właściwości atrybutu style piszemy camelCasem. Na przykład, kod HTML <ul style="background-color: black"> wewnątrz komponentu należałoby zapisać jako <ul style={{ backgroundColor: 'black' }}>.

Zabawa z obiektami javascriptowymi i klamrami

Możesz przenieść kilka wyrażeń do jednego obiektu, a następnie odwołać się do nich w JSX-ie wewnątrz nawiasów klamrowych:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name} - lista zadań</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Usprawnić wideotelefon</li>
        <li>Przygotować wykłady o aeronautyce</li>
        <li>Opracować silnik napędzany alkoholem</li>
      </ul>
    </div>
  );
}

W tym przykładzie obiekt person zawiera tekst w polu name oraz zagnieżdżony obiekt motywu theme:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Komponent może używać tych wartości z obiektu person w następujący sposób:

<div style={person.theme}>
  <h1>{person.name} - lista zadań</h1>

JSX jako język szablonów jest bardzo minimalistyczny, dlatego pozwala na swobodną organizację danych i logiki za pomocą kodu JavaScript.

Powtórka

Teraz wiesz już niemal wszystko na temat składni JSX:

  • Atrybuty JSX-owe zapisane w cudzysłowie są przekazywane jako tekst.
  • Nawiasy klamrowe pozwalają dodać logikę i zmienne javascriptowe do kodu znaczników.
  • Można je stosować w treści znacznika JSX-owego lub bezpośrednio po = w atrybutach.
  • {{ i }} to nie specjalna składnia - to obiekt javascriptowy opatulony w nawiasy klamrowe z JSX-a.

Try out some challenges

Wyzwanie 1 z 3:
Napraw błąd

Poniższy kod rzuca błędem o treści Objects are not valid as a React child (pol. Obiekty nie są prawidłowymi potomkami w Reakcie.):

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person} - lista zadań</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Usprawnić wideotelefon</li>
        <li>Przygotować wykłady o aeronautyce</li>
        <li>Opracować silnik napędzany alkoholem</li>
      </ul>
    </div>
  );
}

Potrafisz znaleźć problem z tym kodem?

WsteczPisanie kodu w JSX
DalejPrzekazywanie wartości do komponentu