Learn React
Describing the UI

JavaScript in JSX with Curly Braces

JSX vam dovoljava da pišete HTML-sličnu oznaku unutar JavaScript dokumenta, čime se logika i sadržaj prikaza drže na istom meestu. Ponekad ćete hteti dodati malo JavaScript logike ili referencirati dinamično svojstvo unutar te oznake. U ovoj situaciji možete koristiti vitičaste zagrade u JSX-u da biste otvorili prozor u JavaScript.

Naučićete:

  • Kako da prosledite stringove sa navodnicima
  • Kako da referencirate JavaScript promenljivu unutar JSX-a sa vitičastim zagradama
  • Kako da pozovete JavaScript funkciju unutar JSX-a sa vitičastim zagradama
  • Kako da koristite JavaScript objekat unutar JSX-a sa vitičastim zagradama

Prosleđivanje stringova sa navodnicima

Kada želite da prosledite string atribut JSX-u, stavite ga u jednostruke ili dvostruke navodnike:

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

Ovde, "https://i.imgur.com/7vQD0fPs.jpg" i "Gregorio Y. Zara" se prosleđuju kao stringovi.

Ali šta ako želite da dinamički odredite src ili alt tekst? Možete koristiti vrednost iz JavaScript-a zamenom " i " sa { i }:

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

Primećujete razliku između className="avatar", što određuje CSS klasu "avatar" koja čini sliku okruglom, i src={avatar} koja čita vrednost JavaScript promenljive koja se zove avatar. To je zato što vitičaste zagrade vam dozvoljavaju da radite sa JavaScript-om upravo tamo u vašem markup-u!

Koristite vitičaste zagrade: Prozor u JavaScript svet

JSX je specijalan način pisanja JavaScript-a. To znači da je moguće koristiti JavaScript unutar njega - sa vitičastim zagradama { }. Primer ispod prvo deklariše ime za naučnika, ime, a zatim ga ugnezduje(nest) sa vitičastim zagradama unutar <h1>:

export default function TodoList() {
  const ime = 'Gregorio Y. Zara';
  return (
    <h1>{ime} spisak stvari za uraditi</h1>
  );
}

Pokušajte da promenite vrednost ime iz 'Gregorio Y. Zara' u 'Hedy Lamarr'. Pogledajte kako se naslov liste menja?

Bilo koja JavaScript ekspresija će raditi između vitičastih zagrada, uključujući pozive funkcija kao što je 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 stvar iza uraditi za {formatDate(today)}</h1>
  );
}

Gde koristiti vitičaste zagrade

Možete koristiti vitičaste zagrade samo na dva načina unutar JSX-a:

  1. Kao tekst direktno unutar JSX oznake: <h1>{ime}l ista za uraditi</h1> radi, ali <{tag}>Gregorio Y. Zara lista stvari za uraditi</{tag}> neće.
  2. Kao atribute odmah ispraćene znakom =: src={avatar} će pročitati promenljivu avatar, ali src="{avatar}" će proslediti string "{avatar}".

Koristite “duple vitičaste zagrade”: CSS i drugi objekti u JSX-u

Uz stringove, brojeve i druge JavaScript ekspresije, možete čak proslediti i objekte u JSX. Objekti se takođe označavaju vitičastim zagradama, kao { ime: "Hedy Lamarr", izumi: 5 }. Stoga, da biste prosledili JS objekat u JSX, morate da umotate objekat u još jedan par vitičastih zagrada: osoba={{ ime: "Hedy Lamarr", izumi: 5 }}.

Možda ćete videti ovo sa inline CSS stilovima u JSX-u. React ne zahteva da koristite inline stilove (CSS klase rade odlično za većinu slučajeva). Ali kada vam je potreban inline stil, prosledite objekat atributu style:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Unaprediti video-telefon</li>
      <li>Pripremiti predavanja iz aeronautike</li>
      <li>Raditi na motoru na alkohol</li>
    </ul>
  );
}

Pokušajte da promenite vrednosti backgroundColor i color.

Stvarno možete videti JavaScript objekat unutar vitičastih zagrada kada ga napišete ovako:

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

Sledeći put kada vidite {{ i }} u JSX-u, znajte da je to ništa više od objekta unutar JSX vitičastih zagrada!

Pitfall

Inline style svojstva se pišu u camelCase. Na primer, HTML <ul style="background-color: black"> bi se napisao kao <ul style={{ backgroundColor: 'black' }}> u vašoj komponenti.

Još zabave sa JavaScript objektima i vitičastim zagradama

Možete da prosledite više JavaScript ekspresija u jedan objekat, i da ih referencirate u vašem JSX-u unutar vitičastih zagrada:

const osoba = {
  ime: 'Gregorio Y. Zara',
  tema: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={osoba.tema}>
      <h1>{osoba.ime} lista</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Unaprediti video-telefon</li>
        <li>Pripremiti predavanja iz aeronautike</li>
        <li>Raditi na motoru na alkohol</li>
      </ul>
    </div>
  );
}

U ovom primeru JavaScript objekat osoba sadrži string ime i objekat tema:

const osoba = {
  ime: 'Gregorio Y. Zara',
  tema: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Komponenta može da koristi ove vrednosti iz osoba ovako:

<div style={osoba.tema}>
  <h1>{osoba.ime}' lista</h1>

JSX je veoma minimalan kao jezik za šabloniranje jer vam omogućava da organizujete podatke i logiku koristeći JavaScript.

Recap

Sada znate skoro sve o JSX-u:

  • JSX atributi unutar navodnika se prosleđuju kao stringovi.
  • Vitičaste zagrade vam omogućavaju da unesete JavaScript logiku i promenljive u vaš markup.
  • One rade unutar JSX oznake ili odmah nakon = u atributima.
  • {{ i }} nisu specijalna sintaksa: to je JavaScript objekat koji je umotan u JSX vitičaste zagrade.

Try out some challenges

Challenge 1 of 3:
Popravite grešku

Ovaj kod ne radi sa greškom koja kaže Objects are not valid as a React child:

const osoba = {
  ime: 'Gregorio Y. Zara',
  tema: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={osoba.tema}>
      <h1>{osoba}' lista</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Unaprediti video-telefon</li>
        <li>Pripremiti predavanja iz aeronautike</li>
        <li>Raditi na motoru na alkohol</li>
      </ul>
    </div>
  );
}

Možete li da nađete problem?

PreviousWriting Markup with JSXNextPassing Props to a Component

How do you like these docs?