Learn React
Describing the UI

JavaScript u JSX-u sa vitičastim zagradama

JSX vam dozvoljava da pišete markup sličan HTML-u unutar JavaScript fajla, čuvajući logiku prikazivanja i sadržaja na istom mestu. Ponekad ćete želeti da dodate malo JavaScript logike ili da referencirate dinamičko svojstvo unutar tog markup-a. U ovoj situaciji možete koristiti vitičaste zagrade u vašem JSX-u da otvorite prozor ka JavaScript-u.

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 description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

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 vam vitičaste zagrade dozvoljavaju da radite sa JavaScript-om upravo 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, name, a zatim ga ubacuje vitičastim zagradama unutar <h1>:

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

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

Bilo koji JavaScript izraz ć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 stvari za 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>{name} lista za uraditi</h1> radi, ali <{tag}>Gregorio Y. Zara lista stvari za uraditi</{tag}> neće.
  2. Kao atribute praćen 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 izraze, možete čak proslediti i objekte u JSX. Objekti se takođe označavaju vitičastim zagradama, kao { name: "Hedy Lamarr", inventions: 5 }. Stoga, da biste prosledili JS objekat u JSX, morate da umotate objekat u još jedan par vitičastih zagrada: person={{ name: "Hedy Lamarr", inventions: 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 u većini 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 izraza u jedan objekat i da ih referencirate u vašem JSX-u unutar vitičastih zagrada:

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name} 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 person sadrži string name i objekat theme:

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

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

<div style={person.theme}>
  <h1>{person.name} 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

Izazov 1 od 3:
Popravite grešku

Ovaj kod ne radi sa greškom koja kaže 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} 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 JSX
NextPassing Props to a Component