Вывучэнне React
Апісанне UI

JavaScript у JSX з дапамогай фігурных дужак

JSX дазваляе пісаць HTML-падобную разметку ўнутры JavaScript файла, каб трымаць логіку рэндэрынгу і змесціва ў адным месцы. Іншы раз вы захочаце дадаць трохі логікі JavaScript, або звярнуцца да дынамічнай уласцівасці ў гэтай разметцы. У гэтым выпадку вы можаце выкарыстоўваць фігурныя дужкі ў вашым JSX, каб «адчыніць акенца» ў JavaScript.

You will learn

  • Як перадаваць радкі з дапамогай двукоссяў
  • Як спасылацца на JavaScript пераменную ўнутры JSX з дапамогай фігурных дужак
  • Як выклікаць JavaScript функцыю ў JSX з дапамогай фігурных дужак
  • Як выкарыстоўваць JavaScript аб’ект у JSX з дапамогай фігурных дужак

Перадача радкоў з дапамогай двукоссяў

Калі вы хочаце перадаць радковы атрыбут у JSX, вам трэба змясціць яго ў адзінарныя або двайныя двукоссі:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Грэгорыа І. Зара"
    />
  );
}

Тут, "https://i.imgur.com/7vQD0fPs.jpg" і "Грэгорыа І. Зара" перадаюцца як радкі.

Але што, калі вы хочаце дынамічна задаць значэнне src або alt? Вы можаце выкарыстоўваць значэнне з JavaScript, замяніўшы " і " на { і }:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Грэгорыа І. Зара';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Звярніце ўвагу на розніцу паміж запісам className="avatar", які вызначае назву CSS класа "avatar", што робіць відарыс круглым, і запісам src={avatar}, які счытвае значэнне JavaScript пераменнай пад назвай avatar. Гэта адбываецца таму, што фігурныя дужкі дазваляюць працаваць з JavaScript прама ў вашай разметцы!

Выкарыстанне фігурных дужак: акенца ў свет JavaScript

JSX — гэта спецыяльны спосаб напісання JavaScript. Гэта азначае, што ўнутры JSX можна выкарыстоўваць JavaScript — з дапамогай фігурных дужак { }. У прыведзеным ніжэй прыкладзе спачатку аб’яўляецца пераменная name, у якой захоўваецца імя навукоўца, а потым гэтая пераменная ўбудоўваецца ў <h1> з дапамогай фігурных дужак:

export default function TodoList() {
  const name = 'Грэгорыа І. Зара';
  return (
    <h1>Спіс спраў {name}</h1>
  );
}

Паспрабуйце змяніць значэнне пераменнай name з 'Грэгорыя І. Зара' на 'Хедзі Ламар'. Бачыце, як змяняецца назва спісу?

Любы JavaScript выраз будзе працаваць паміж фігурнымі дужкамі, у тым ліку выклікі функцый накшталт formatDate():

const today = new Date();

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

export default function TodoList() {
  return (
    <h1>Спіс спраў на {formatDate(today)}</h1>
  );
}

Дзе выкарыстоўваць фігурныя дужкі

Унутры JSX вы можаце выкарыстоўваць фігурныя дужкі толькі двума спосабамі:

  1. Як тэкст непасрэдна ўнутры JSX тэга: <h1>Спіс спраў {name}</h1> будзе працаваць, але <{tag}>Спіс спраў Грэгорыа І. Зара</{tag}> працаваць не будзе.
  2. У якасці атрыбутаў адразу пасля знака =: src={avatar} прачытае пераменную avatar, але src="{avatar}" перадасць радок "{avatar}".

Выкарыстанне падвойных фігурных дужак: CSS і іншыя аб’екты ў JSX

У дадатак да радкоў, лічбаў і іншых JavaScript выразаў, у JSX вы можаце перадаваць нават аб’екты. Аб’екты таксама пазначаюцца фігурнымі дужкамі, напрыклад { name: "Хедзі Ламар", inventions: 5 }. Такім чынам, каб перадаць JS аб’ект у JSX, вы павінны абгарнуць аб’ект у яшчэ адну пару фігурных дужак: person={{ name: "Хедзі Ламар", inventions: 5 }}.

Гэта бачна на прыкладзе ўбудаваных CSS стыляў у JSX. React не патрабуе ад вас выкарыстання ўбудаваных стыляў (CSS класы выдатна працуюць у большасці выпадкаў). Але калі вам патрэбны ўбудаваны стыль, вы перадаяце аб’ект у атрыбут style:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Палепшыць відэатэлефон</li>
      <li>Падрыхтаваць лекцыі па аэранаўтыцы</li>
      <li>Папрацаваць над рухавіком на спірце</li>
    </ul>
  );
}

Паспрабуйце змяніць значэнні backgroundColor і color.

Вы можаце ўбачыць JavaScript аб’ект у фігурных дужках, калі напішаце яго так:

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

У наступны раз, калі вы ўбачыце ў JSX {{ і }}, ведайце, што гэта не што іншае, як аб’ект унутры фігурных дужак JSX!

Pitfall

Убудаваныя ўласцівасці атрыбута style запісваюцца ў camelCase. Напрыклад, HTML код <ul style="background-color: black"> будзе запісаны ў вашым кампаненце як <ul style={{ backgroundColor: 'black' }}>.

Яшчэ аб JavaScript аб’ектах і фігурных дужках

Вы можаце аб’яднаць некалькі выразаў у адзін аб’ект і спасылацца на іх у JSX з дапамогай фігурных дужак:

const person = {
  name: 'Грэгорыа І. Зара',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Спіс спраў {person.name}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Грэгорыа І. Зара"
      />
      <ul>
        <li>Палепшыць відэатэлефон</li>
        <li>Падрыхтаваць лекцыі па аэранаўтыцы</li>
        <li>Папрацаваць над рухавіком на спірце</li>
      </ul>
    </div>
  );
}

У гэтым прыкладзе JavaScript аб’ект person змяшчае радок name і аб’ект theme:

const person = {
  name: 'Грэгорыа І. Зара',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Кампанент можа выкарыстоўваць гэтыя значэнні з аб’екта person наступным чынам:

<div style={person.theme}>
  <h1>Спіс спраў {person.name}</h1>

JSX вельмі мінімалістычная мова шаблонаў, таму што яна дазваляе арганізоўваць даныя і логіку з дапамогай JavaScript.

Recap

Цяпер вы ведаеце амаль усё пра JSX:

  • JSX атрыбуты ў двукоссях перадаюцца як радкі.
  • Фігурныя дужкі дазваляюць выкарыстоўваць JavaScript логіку і пераменныя ў вашай разметцы.
  • Яны працуюць унутры змесціва JSX тэга або непасрэдна пасля = у атрыбутах.
  • {{ і }} не з’яўляюцца спецыяльным сінтаксісам: гэта JavaScript аб’ект, схаваны ўнутры фігурных дужак JSX.

Try out some challenges

Challenge 1 of 3:
Выправіце памылку

Гэты код выдае памылку Objects are not valid as a React child:

const person = {
  name: 'Грэгорыа І. Зара',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Спіс спраў {person}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Грэгорыа І. Зара"
      />
      <ul>
        <li>Палепшыць відэатэлефон</li>
        <li>Падрыхтаваць лекцыі па аэранаўтыцы</li>
        <li>Папрацаваць над рухавіком на спірце</li>
      </ul>
    </div>
  );
}

Вы можаце знайсці праблему?

PreviousНапісанне разметкі з JSX
NextПерадача пропсаў у кампанент