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():

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

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

Як тэкст непасрэдна ўнутры JSX тэга: <h1>Спіс спраў {name}</h1> будзе працаваць, але <{tag}>Спіс спраў Грэгорыа І. Зара</{tag}> працаваць не будзе.
У якасці атрыбутаў адразу пасля знака =: 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Перадача пропсаў у кампанент