{"componentChunkName":"component---src-templates-docs-js","path":"/docs/jsx-in-depth.html","result":{"data":{"markdownRemark":{"html":"

JSX — синтаксичний цукор для функції React.createElement(component, props, ...children). Наступний JSX-вираз:

\n
<MyButton color=\"blue\" shadowSize={2}>\n  Натисни мене\n</MyButton>
\n

скомпілюється у:

\n
React.createElement(\n  MyButton,\n  {color: 'blue', shadowSize: 2},\n  'Натисни мене'\n)
\n

Також ви можете використати cамозакриваючий тег, якщо відсутні дочірні елементи. Отже вираз:

\n
<div className=\"sidebar\" />
\n

скомпілюється у:

\n
React.createElement(\n  'div',\n  {className: 'sidebar'}\n)
\n

Якщо ви бажаєте перевірити, як JSX-вираз компілюється у JavaScript, спробуйте онлайн-компілятор Babel.

\n

Визначення типу React-елемента

\n

Перша частина JSX-тегу вказує на тип React-елемента.

\n

Типи, що починаються з великої літери, вказують, що JSX-тег посилається на React-компонент. Ці теги компілюються в пряме посилання на іменовану змінну, тому Foo має бути в області застосування, якщо ви використовуєте JSX-вираз <Foo />.

\n

React має бути в області застосування

\n

Оскільки JSX компілюється у виклики функції React.createElement, бібліотека React також має бути в області застосування вашого JSX-виразу.

\n

Наприклад, обидва імпорти необхідні в цьому випадку, навіть враховуючи, що React та CustomButton не викликаються напряму в JavaScript:

\n
import React from 'react';import CustomButton from './CustomButton';\nfunction WarningButton() {\n  // повертає React.createElement(CustomButton, {color: 'red'}, null);  return <CustomButton color=\"red\" />;\n}
\n

Якщо ви не користуєтеся JavaScript-бандлерами та підключаєте React через тег <script>, то він вже доступний через глобальну змінну React.

\n

Використання запису через крапку

\n

Ви також можете посилатися на React-компонент, використовуючи запис через крапку. Це зручно, коли у вас наявний модуль, що експортує багато React-компонентів. Наприклад, якщо MyComponents.DatePicker — компонент, то ви можете посилатися на нього напряму:

\n
import React from 'react';\n\nconst MyComponents = {\n  DatePicker: function DatePicker(props) {\n    return <div>Уявіть тут {props.color} віджет вибору дати.</div>;\n  }\n}\n\nfunction BlueDatePicker() {\n  return <MyComponents.DatePicker color=\"блакитний\" />;}
\n

Назви типів компонентів користувача повинні починатися з великої літери

\n

Коли тип елемента починається з маленької літери, то він посилається на вбудовані компоненти, такі як <div> чи <span>, та передається до React.createElement у вигляді рядка 'div' чи 'span'. Типи, що починаються з великої літери, наприклад <Foo />, компілюються у React.createElement(Foo) та відповідають компоненту, що був визначений або імпортований у вашому JavaScript файлі.

\n

Ми рекомендуємо використовувати назви компонентів, що починаються з великих літер. Якщо назва вашого компоненту починається з малої літери, визначте зміну, що починається з великої літери та посилається на ваш компонент, та використовуйте її в JSX.

\n

Наприклад, наступний вираз не буде працювати як очікується:

\n
import React from 'react';\n\n// Невірно! Цей компонент має починатися з великої літери:function hello(props) {  // Вірно! Використання <div> тут правомірне, тому що div — валідний HTML-тег:\n  return <div>Привіт {props.toWhat}</div>;\n}\n\nfunction HelloWorld() {\n  // Невірно! React сприймає <hello /> як HTML-тег, тому що він починається з маленької літери:  return <hello toWhat=\"світ\" />;}
\n

Щоб виправити, ми перейменуємо hello у Hello та використаємо <Hello />, коли будемо посилатися на нього:

\n
import React from 'react';\n\n// Вірно! Цей компонент має починатися з великої літери:function Hello(props) {  // Вірно! Використання <div> тут правомірне, тому що div — валідний HTML-тег:\n  return <div>Привіт {props.toWhat}</div>;\n}\n\nfunction HelloWorld() {\n  // Вірно! React знає, що <Hello /> є компонентом, бо він починається з великої літери.  return <Hello toWhat=\"світ\" />;}
\n

Вибір типу під час виконання

\n

У якості типу React-елементу не можна використовувати вирази. Якщо ви все ж захочете скористатися виразом для визначення типу елемента, призначте його змінній, що починається з великої літери. Зазвичай це потрібно, якщо ви хочете застосувати різні компоненти в залежності від пропсів:

\n
import React from 'react';\nimport { PhotoStory, VideoStory } from './stories';\n\nconst components = {\n  photo: PhotoStory,\n  video: VideoStory\n};\n\nfunction Story(props) {\n  // Невірно! JSX-тип не може бути виразом.  return <components[props.storyType] story={props.story} />;}
\n

Щоб це виправити, спочатку ми привласнимо тип змінній, що починається з великої літери:

\n
import React from 'react';\nimport { PhotoStory, VideoStory } from './stories';\n\nconst components = {\n  photo: PhotoStory,\n  video: VideoStory\n};\n\nfunction Story(props) {\n  // Вірно! JSX-тип може бути змінною, що починається з великої літери.  const SpecificStory = components[props.storyType];  return <SpecificStory story={props.story} />;}
\n

Пропси в JSX

\n

Існує декілька шляхів для передачі пропсів в JSX.

\n

JavaScript-вирази як пропси

\n

Ви можете передавати будь-які Javascript-вирази як пропси, записавши їх у фігурні дужки {}. Наприклад, як в цьому JSX:

\n
<MyComponent foo={1 + 2 + 3 + 4} />
\n

Для MyComponent значення props.foo буде рівне 10 тому, що вираз 1 + 2 + 3 + 4 буде обчислений.

\n

Оператор if та цикл for не є виразами в JavaScript, тому їх не можна використати безпосередньо в JSX. Натомість ви можете застосувати їх в коді, що передує використанню їх результату. Наприклад:

\n
function NumberDescriber(props) {\n  let description;\n  if (props.number % 2 == 0) {    description = <strong>парне</strong>;  } else {    description = <i>непарне</i>;  }  return <div>{props.number} — {description} число</div>;\n}
\n

Ви можете дізнатися більше про умовний рендеринг та цикли у відповідниx розділах.

\n

Рядкові літерали

\n

Ви можете передати рядковий літерал як проп. Ці два вирази еквівалентні:

\n
<MyComponent message=\"привіт світ\" />\n\n<MyComponent message={'привіт світ'} />
\n

Коли ви передаєте рядковий літерал, всі його символи будуть екрановані відповідно до HTML-сутностей. Тому наступні два записи еквівалентні:

\n
<MyComponent message=\"&lt;3\" />\n\n<MyComponent message={'<3'} />
\n

Зазвичай така поведінка не має вас турбувати. Вона описана для повноти інформації.

\n

Пропси за замовчуванням встановлені в “true”

\n

Якщо ви не передаєте жодного значення пропу, то за замовчуванням його значення дорівнюватиме true. Ці два записи еквівалентні:

\n
<MyTextBox autocomplete />\n\n<MyTextBox autocomplete={true} />
\n

Здебільшого, ми не рекомендуємо не передавати значення пропу, так як цей запис може бути сплутаний зі скороченням імен властивостей з ES6 Наприклад, {foo} — короткий запис {foo: foo}, а не {foo: true}. Ця поведінка існує, тому що відповідає поведінці HTML.

\n

Розпакування атрибутів

\n

Якщо ви вже маєте визначені пропси в об’єкті props та хочете передати їх в JSX, то ви можете скористатися оператором розпакування ..., щоб це зробити. Ці два компоненти еквівалентні:

\n
function App1() {\n  return <Greeting firstName=\"Іван\" lastName=\"Франко\" />;\n}\n\nfunction App2() {\n  const props = {firstName: 'Іван', lastName: 'Франко'};\n  return <Greeting {...props} />;}
\n

Ви також можете вибрати визначені пропси, що будуть використовуватися вашим компонентом, в той час як інші пропси можна передати за допомогою оператора розпакування.

\n
const Button = props => {\n  const { kind, ...other } = props;  const className = kind === \"primary\" ? \"PrimaryButton\" : \"SecondaryButton\";\n  return <button className={className} {...other} />;\n};\n\nconst App = () => {\n  return (\n    <div>\n      <Button kind=\"primary\" onClick={() => console.log(\"натиснуто!\")}>\n        Привіт світ!\n      </Button>\n    </div>\n  );\n};
\n

У попередньому прикладі, проп kind використовується безпечно та не передається в елемент <button>, що знаходиться в DOM.\nВсі інші пропси передаються за допомогою об’єкту ...other, що робить компонент справді гнучким. Це можна помітити на прикладі пропсів onClick та children, що передаються в <button>.

\n

Розпакування атрибутів може бути корисним, проте з ним легше передати непотрібні пропси в компоненти або невалідні HTML-атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.

\n

Дочірні компоненти в JSX

\n

У JSX-виразах контент, що міститься між відкриваючим та закриваючим тегами, передається через спеціальний проп props.children. Існує декілька варіантів передачі дочірніх елементів:

\n

Рядкові літерали

\n

Ви можете розмістити рядок між відкриваючим та закриваючими тегами, тоді props.children дорівнюватиме цьому рядку. Це корисно при створенні вбудованих HTML-елементів. Наприклад:

\n
<MyComponent>Привіт світ!</MyComponent>
\n

Це приклад валідного JSX, де значення props.children у MyComponent дорівнюватиме рядку "Привіт світ!". HTML не екранується, тому ви можете писати JSX так, наче ви пишете HTML:

\n
<div>&quot; Це водночас валідний HTML та JSX &quot;</div>
\n

JSX прибирає пусті рядки та пробіли на початку та в кінці рядка. Переходи на нові рядки, що прилягають до тегів, видаляються; переходи на нові рядки, що знаходяться між рядковими літералими стискаються до одного пробілу. Таким чином наступні вирази дадуть однаковий результат:

\n
<div>Привіт світ</div>\n\n<div>\n  Привіт світ\n</div>\n\n<div>\n  Привіт\n  світ\n</div>\n\n<div>\n\n  Привіт світ\n</div>
\n

Дочірні JSX-елементи

\n

Для відображення вкладених компонентів, можна передавати декілька JSX-елементів:

\n
<MyContainer>\n  <MyFirstComponent />\n  <MySecondComponent />\n</MyContainer>
\n

Ви можете поєднувати різні типи нащадків разом і у такий спосіб можна використовувати рядкові літерали разом з JSX-елементами. Це ще один приклад того, як JSX схожий на HTML, а тому наступний код валідний як для JSX, так і для HTML:

\n
<div>\n  Наступним йде список:\n  <ul>\n    <li>Елемент 1</li>\n    <li>Елемент 2</li>\n  </ul>\n</div>
\n

Також React-компонент може повертати масив елементів:

\n
render() {\n  // Немає необхідності обгортати список елементів у додатковий елемент!\n  return [\n    // Не забудьте про ключі :)\n    <li key=\"A\">Перший елемент</li>,\n    <li key=\"B\">Другий елемент</li>,\n    <li key=\"C\">Третій елемент</li>,\n  ];\n}
\n

JavaScript-вирази як дочірні елементи

\n

Ви можете передати будь-який JavaScript-вираз як дочірній елемент, записавши його у фігурних дужках {}. Наприклад, ці вирази еквівалентні:

\n
<MyComponent>foo</MyComponent>\n\n<MyComponent>{'foo'}</MyComponent>
\n

Часто це буває корисним для рендерингу списку JSX-виразів довільної довжини. Наприклад, цей код рендерить HTML-список:

\n
function Item(props) {\n  return <li>{props.message}</li>;}\n\nfunction TodoList() {\n  const todos = ['закінчити документацію', 'надіслати пулреквест', 'нагадати Дену за рев`ю'];\n  return (\n    <ul>\n      {todos.map((message) => <Item key={message} message={message} />)}    </ul>\n  );\n}
\n

JavaScript-вирази можуть використовуватися разом з іншими типами дочірніх елементів. Їх також буває корисно використовувати замість шаблонних рядків:

\n
function Hello(props) {\n  return <div>Привіт {props.addressee}!</div>;}
\n

Функції як дочірні елементи

\n

Зазвичай JavaScript-вирази, що прописані в JSX, перетворюються в рядок, React-елемент або список з попередніх. Проте props.children працює так само, як і будь-який інший проп, тому він може передавати будь-який тип даних, а не тільки ті, що React знає як рендерити. Наприклад, якщо ви маєте компонент користувача, ви можете передати функцію зворотнього виклику у props.children:

\n
// Викликати numTimes разів дочірню функцію зворотнього виклику для створення повторюваних компонентів\nfunction Repeat(props) {\n  let items = [];\n  for (let i = 0; i < props.numTimes; i++) {    items.push(props.children(i));\n  }\n  return <div>{items}</div>;\n}\n\nfunction ListOfTenThings() {\n  return (\n    <Repeat numTimes={10}>\n      {(index) => <div key={index}>Це елемент {index} у списку</div>}    </Repeat>\n  );\n}
\n

Дочірні елементи, що передаються в компонент користувача, можуть бути будь-чим за умови, що компонент перетворить їх у щось, що React зможе зрозуміти та відрендерити. Дана техніка непоширена, але нею можна скористатися, якщо захочете розширити можливості JSX.

\n

Логічні значення, null та undefined ігноруються

\n

false, null, undefined та true — валідні дочірні елементи. Вони просто не рендеряться. Ці JSX-вирази дадуть однаковий результат:

\n
<div />\n\n<div></div>\n\n<div>{false}</div>\n\n<div>{null}</div>\n\n<div>{undefined}</div>\n\n<div>{true}</div>
\n

Це може бути корисним при умовному рендерингу React-елементів. Наступний JSX-вираз відрендерить <Header /> за умови, що showHeader дорівнює true:

\n
<div>\n  {showHeader && <Header />}  <Content />\n</div>
\n

Існує одне зауваження, що React все одно рендерить “неправдиві” значення, такі як число 0. Наприклад, наступний код відпрацює не так, як очікується, тому що 0 буде виведено, коли props.messages буде пустим масивом:

\n
<div>\n  {props.messages.length &&    <MessageList messages={props.messages} />\n  }\n</div>
\n

Щоб це виправити, будьте певні, що вираз перед оператором && — логічне значення:

\n
<div>\n  {props.messages.length > 0 &&    <MessageList messages={props.messages} />\n  }\n</div>
\n

Якщо ви хочете, щоб значення false, true, null чи undefined навпаки потрапили до результату, вам необхідно попередньо перетворити їх у рядок:

\n
<div>\n  Моя Javascript змінна — {String(myVariable)}.</div>
","frontmatter":{"title":"JSX в деталях","next":null,"prev":null},"fields":{"path":"content/docs/jsx-in-depth.md","slug":"docs/jsx-in-depth.html"}}},"pageContext":{"slug":"docs/jsx-in-depth.html"}},"staticQueryHashes":[]}