Opettele Reactia
Käyttöliittymän kuvaus

JavaScriptia JSX:ssa aaltosulkeilla

JSX:lla voit kirjoittaa HTML-tyylistä merkintäkoodia JavaScript tiedoston sisällä, pitäen renderöintilogiikan ja sisällön samassa paikassa. Joksus haluat käyttää vain vähän JavaScript logiikkaa tai viitata dynaamiseen muuttujaan merkintäkoodin sisällä. Tässä tilanteessa voit käyttää aaltosulkeita JSX koodissasi avataksesi ikkunan JavaScriptiin.

Tulet oppimaan

  • Miten välität merkkijonoja heittomerkeillä
  • Miten viittaat JavaScript muuttujaan JSX:n sisällä aaltosulkeilla
  • Miten kutsut JavaScript funktiota JSX:n sisällä aaltosulkeilla
  • Miten käytät JavaScript oliota JSX:n sisällä aaltosulkeilla

Merkkijonojen välittäminen heittomerkeillä

Kun haluat välittää merkkijonoattribuutin JSX koodissa, voit käyttää heittomerkkejä tai lainausmerkkejä:

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

Tässä "https://i.imgur.com/7vQD0fPs.jpg" ja "Gregorio Y. Zara" välitetään merkkijonoina.

Mutta entä jos haluat dynaamisesti määritellä src tai alt tekstit? Voit käyttää JavaScript arvoja korvaamalla " ja " merkeillä { ja }:

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

Huomaa className="avatar" määrittelee "avatar" CSS luokan nimen joka tekee kuvasta pyöreän ja src={avatar} joka lukee JavaScript muuttujan avatar arvon. Tämä tapahtuu siksi koska aaltosulkeilla voit käyttää JavaScriptia suoraan merkintäkoodissasi.

Aaltosulkeiden käyttö: Ikkuna JavaScriptin maailmaan

JSX on erityinen tapa kirjoittaa JavaScriptia. Se tarkoittaa, että on mahdollista käyttää JavaScriptia sen sisällä—aaltosulkeilla { }. Alla oleva esimerkki ensiksi määrittelee nimen name tutkijalle, sitten upottaa sen aaltosulkeilla <h1> tagin sisälle:

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

Kokeile muuttaa name:n arvoa arvosta 'Gregorio Y. Zara' arvoksi 'Hedy Lamarr'. Huomaatko miten listan otsikko muuttuu?

Mikä tahansa JavaScript -lauseke toimii aaltosulkeiden välissä, mukaanlukien funktiokutsut kuten 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>
  );
}

Missä käyttää aaltosulkeita

Voit käyttää aaltosulkeita JSX:n sisällä kahdella tavalla:

  1. Tekstinä suoraan JSX tagin sisällä: <h1>{name}'s To Do List</h1> toimii, mutta <{tag}>Gregorio Y. Zara's To Do List</{tag}> ei toimi.
  2. Attribuutteina heti = merkin jälkeen: src={avatar} lukee avatar muuttujan, mutta src="{avatar}" välittää merkkijonon {avatar}.

Kaksoisaaltosulkeiden käyttö: CSS ja muut oliot JSX:ssä

Merkkijonojen, numeroiden sekä muiden JavaScript lauseiden lisäksi voit antaa oliota JSX:ssä. Oliot myös merkitään aaltosulkeilla, kuten { name: "Hedy Lamarr", inventions: 5 }. Siksi, jotta voit välittää JS olion JSX:ssä, joudutaan käärimään olio toisien aaltosukleiden sisään: person={{ name: "Hedy Lamarr", inventions: 5 }}.

Saatat nähdä tämän rivinsisäisissä CSS tyyleissä JSX:ssä. React ei pakota rivinsisäisten tyylien käyttöä (CSS luokat toimivat hyvin useimmissa tilanteissa). Mutta kun tarvitset rivinsisäisiä tyylejä, voit välittää olion style attribuutille seuraavasti:

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

Kokeile muuttaa backgroundColor ja color arvoja.

Erotat kunnolla JavaScript olion aaltosulkeiden sisällä kun kirjoitat sen seuraavasti:

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

Seuraavalla kertaa kun näet {{ ja }} JSX:ssä, tiedät että se tarkoittaa vain oliota JSX:ssä aaltosulkeiden sisällä!

Sudenkuoppa

Rivinsisäinen style ominaisuudet kirjoitetaan camelCase muodossa. Esimerkiksi HTML <ul style="background-color: black"> kirjoitettaisiin seuraavasti <ul style={{ backgroundColor: 'black' }}> komponentissasi.

Lisää hauskuutta JavaScript olioilla ja aaltosulkeilla

Voit siirtää useita lauseita yhteen olioon ja viitata niihin JSX koodissasi aaltosulkeissa:

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

Tässä esimerkissä person JavaScript olio sisältää name merkkijonon ja theme olion:

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

Komponentti voi käyttää näitä arvoja person oliosta seuraavasti:

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

JSX on minimaalinen mallinnuskieli, koska sen avulla voi järjestää dataa ja logiikkaa JavaScriptia käyttämällä.

Kertaus

Nyt tiedät melkein kaiken JSX:stä:

  • JSX attribuutit heittomerkkien välissä välitetään merkkijonona.
  • Aaltosulkeilla tuot JavaScript logiikan ja muuttujat merkintäkoodiin.
  • Ne toimivat JSX tagien sisällä sisältönä tai suoraan = merkin jälkeen attribuuteissa.
  • {{ ja }} ei ole erityistä syntaksia: se on JavaScriptin olio JSX aaltosulkeiden sisällä.

Kokeile haasteita

Haaste 1 / 3:
Korjaa ongelma

Tämä koodi kaatuu virheellä 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>
  );
}

Löydätkö ongelman?

PreviousMerkintäkoodin kirjoittaminen JSX:lläNextPropsien välittäminen komponentille

How do you like these docs?