Learn React
Describing the UI

JavaScript v JSX se složenými závorkami

JSX vám umožňuje psát strukturu podobnou jako je HTML přímo uvnitř JavaScriptového souboru. Díky tomu je rendrovací logika a obsah na jednom místě. Může se stát, že budete potřebovat přidat JavaScriptovou logiku nebo odkázat na nějakou proměnnou uvnitř struktury. V tom případě, můžete využít složené závorky v JSX a dát tak prostor pro JavaScript.

You will learn

  • Jak předat řetězec pomocí uvozovek
  • How to reference a JavaScript variable inside JSX with curly braces
  • Jak zavolat JavaScriptovou funkci uvnitř JSX pomocí složených závorek
  • Jak použít JavaScriptový objekt uvnitř JSX pomocí složených závorek

Předávání stringů pomocí uvozovek

Když chcete předat řetězec jako argument v JSX, stačí jej dát do jednoduchých nebo dvojitých uvozovek:

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

Zde byly "https://i.imgur.com/7vQD0fPs.jpg" a "Gregorio Y. Zara" předány jako řetězce.

Co když chceze dynamicky měnit src nebo alt? Můžete použít hodnotu z JavaScriptu zaměněním " a " za { a }:

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

Povšimnněte si toho rozdílu mezi className="avatar", který specifikuje "avatar" CSS třídu, která dělá kulatý obrázek, a src={avatar} která řze hodnotu z JavaScriptové proměnné zvané avatar. To se děje díky tomu, že složené závorky dovolují pracovat s JavaScriptem přímo ve struktuře!

Používání složených závorek: Okno do světa JavaScriptu

JSX je speciální způsob jak psát JavaScript. To znamneá, že je možné použít JavaScript uvnitř složených závorek { }. V příkladu níže nejprve dekladujeme promenou pro jméno vědce, name a poté vlotžíme tuto proměnou uvnitř složených záorek do <h1>:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

ZKuste změnit hodnotu name z 'Gregorio Y. Zara' na 'Hedy Lamarr'. Všimli jste si jak se nadpis seznamu zmněnil?

Jakákoliv JavaScriptová syntaxe bude fungovat ve složených závorkách, to zahrnuje i volání funkcí jako formatDate():

const today = new Date();

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

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

Kde použít složené závorky

Jsou dva způsoby, jak použít složené závorky v JSX:

  1. Jako text přímo v JSX tagu: <h1>{name}'s To Do List</h1> funguje, ale <{tag}>Gregorio Y. Zara's To Do List</{tag}> nebude fungovat.
  2. Jako atribut ihned po = znaku: src={avatar} přečte avatar proměnnou, ale src="{avatar}" bude předáno jako řetězec "{avatar}".

Používání “dvojitých složených závorek”: CSS a ostatní objekty v JSX

Krome řetězců, čísel a dalších JavaScriptových výrazů, můžete v JSX předávat i objekty. Objekty jsou také označené složenými závorkami, například { name: "Hedy Lamarr", inventions: 5 }. Proto v JSX je třeba obalit objekt dalším párem složených závorek: person={{ name: "Hedy Lamarr", inventions: 5 }}.

Můžete se s tím setkat v případě inline CSS stylů v JSX. React nevyžaduje použití inline stylů (CSS třídy fungují pro většinu případů dobře). V případě, že potřebujete inline styl, je třeba předat objekt style atributu:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

Zkuste změnit hodnoty backgroundColor a color.

Můžete vidět JavaScriptový objekt uvnitř složených závorek v případě, že to napíšete takto:

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

Příště, až uvidíte {{ a }} v JSX budete vědět, že je jen objekt uvnitř JSX!

Pitfall

Inline style atributy se píší jako camelCase. Například, HTML <ul style="background-color: black"> bude zapsáno jako <ul style={{ backgroundColor: 'black' }}> ve vaší komponentě.

Více zábavy s objekty v JavaScriptu a složenými závorkami

Můžete přesunout několik výrazů do jednoho objektu a odkázat na něj v JSX uvnitř složených závorek:

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

V tomto příkladě je person JavaScriptový objekt obsahující řetězec name a theme objekt:

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

Komponenta může použít hodnoty z objektu person následovně:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX není jen šablonovací jazyk, protože umožňuje kombinovat data a logiku s použitím JavaScriptu.

Recap

Nyní víte skoro všechno o JSX:

  • JSX atributy uvnitř uvozovek jsou předány jako řetězce.
  • Složené závorky umožňují použít JavaScriptovou logiku a proměnné uvnitř struktury.
  • Fungují v JSX nebo ihned za = v atributech.
  • {{ a }} není speciální syntaxe, je to pouze objekt obalený složenými závorkami z JSX.

Try out some challenges

Challenge 1 of 3:
Fix the mistake

This code crashes with an error saying Objects are not valid as a React child:

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Can you find the problem?

PreviousWriting Markup with JSXNextPassing Props to a Component

How do you like these docs?