diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index 74192b5c0..55ab906c4 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -20,7 +20,7 @@ title: Передача пропсів до компонента ## Знайомі пропси {/*familiar-props*/} -Пропси — це інформація, яку ви передаєте до тегу JSX. Наприклад, `className`, `src`, `alt`, `width` та `height` деякі з пропсів, які ви можете передати до тегу ``: +Пропси — це інформація, яку ви передаєте до тегу JSX. Наприклад, `className`, `src`, `alt`, `width` та `height` — деякі з пропсів, які ви можете передати до тегу ``: @@ -100,7 +100,7 @@ function Avatar({ person, size }) { } ``` -Додайте деяку логіку до `Avatar`, яка використовує пропси `person` та `size` для відображення і готово. +Додайте трохи логіки до `Avatar`, яка використовує пропси `person` та `size` для відображення, і готово. Тепер ви можете налаштувати `Avatar` для відображення багатьма різними способами з різними пропсами. Спробуйте змінити значення! @@ -170,7 +170,7 @@ body { min-height: 120px; } Props дозволяють вам думати про батьківські та дочірні компоненти незалежно. Наприклад, ви можете змінити проп `person` або `size` всередині `Profile`, не думаючи про те, як `Avatar` використовує їх. Аналогічно, ви можете змінити спосіб використання `Avatar` цих пропсів, не звертаючи уваги на `Profile`. -Ви можете уявляти пропси як "ручки", які ви можете налаштовувати. Вони виконують ту саму роль, що і аргументи для функцій - насправді, пропси _є_ єдиним аргументом вашого компонента! Функції компонентів React приймають один аргумент - об'єкт `props`: +Уявіть пропси як «ручки регулювання», які ви можете налаштовувати. Вони виконують ту саму роль, що і аргументи для функцій — насправді, пропси _є_ єдиним аргументом вашого компонента! Функції компонентів React приймають один аргумент — об'єкт `props`: ```js function Avatar(props) { @@ -251,11 +251,11 @@ function Profile(props) { Це передає всі пропси `Profile` до `Avatar` без перерахування кожного з їх імен. -**Використовуйте синтаксис spread з обережністю.** Якщо ви використовуєте його в кожному другому компоненті щось пішло не так. Часто це означає, що вам слід розбити ваші компоненти і передавати дітей як JSX. Детальніше про це далі! +**Використовуйте синтаксис spread з обережністю.** Якщо ви використовуєте його в кожному наступному компоненті, то щось пішло не так. Часто це свідчить про те, що вам слід розбити компоненти і передавати дітей як JSX. Детальніше про це далі! ## Передача JSX як дітей {/*passing-jsx-as-children*/} -Вкладення вбудованих тегів браузера є звичайним ділом: +Вкладення вбудованих тегів браузера є звичайною справою: ```js
@@ -271,7 +271,7 @@ function Profile(props) { ``` -Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children`, встановлену на `` і відображатиме його в обгортковому div: +Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children` зі значенням `` і відображатиме його в обгортковому div: @@ -347,11 +347,11 @@ export function getImageUrl(person, size = 's') { -Спробуйте замінити `` всередині `` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон в багатьох місцях. +Спробуйте замінити `` всередині `` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон у багатьох місцях. Ви можете уявляти компонент з пропом `children` як компонент з "отвіром", який може бути "заповнений" батьківськими компонентами з довільним JSX. Ви часто будете використовувати властивість `children` для візуальних обгорток: панелей, сіток і т.д. - + ## Як пропси змінюються з часом {/*how-props-change-over-time*/} @@ -409,19 +409,19 @@ export default function App() { Цей приклад показує, що **компонент може отримувати різні пропси з часом**. Пропси не завжди є статичними! Тут проп `time` змінюється кожну секунду, а проп `color` змінюється, коли ви вибираєте інший колір. Пропси відображають дані компонента в будь-який момент часу, а не лише на початку. -Однак, пропси є [незмінними(immutable)](https://uk.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B7%D0%BC%D1%96%D0%BD%D0%BD%D0%B8%D0%B9_%D0%BE%D0%B1%27%D1%94%D0%BA%D1%82) — термін з комп'ютерних наук, що означає "незмінні". Коли компоненту потрібно змінити свої пропси (наприклад, відповідно до взаємодії користувача або нових даних), він повинен "запитати" свій батьківський компонент передати йому _інші пропси_ — новий об'єкт! Його старі пропси будуть відкинуті, і, врешті-решт, рушій JavaScript звільнить пам'ять, яку вони займали. +Однак, пропси є [незмінними (immutable)](https://uk.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B7%D0%BC%D1%96%D0%BD%D0%BD%D0%B8%D0%B9_%D0%BE%D0%B1%27%D1%94%D0%BA%D1%82). Коли компоненту потрібно змінити свої пропси (наприклад, відповідно до взаємодії користувача або нових даних), він повинен «попросити» свій батьківський компонент передати йому _інші пропси_ — новий об'єкт! Його старі пропси будуть відкинуті, і, врешті-решт, рушій JavaScript звільнить пам'ять, яку вони займали. -**Не намагайтеся «змінювати пропси»**. Коли вам потрібно реагувати на введення користувача (наприклад, змінювати вибраний колір), вам потрібно «встановити стан», про що ви можете дізнатися в [Стан: Пам'ять компонента.](/learn/state-a-components-memory) +**Не намагайтеся «змінювати пропси»**. Щоб реагувати на введення користувача (наприклад, змінювати вибраний колір), вам потрібно «встановити стан», про що ви можете дізнатися у розділі [Стан: Пам'ять компонента.](/learn/state-a-components-memory) -* Щоб передати пропси, додайте їх до JSX, так само, як ви робите з атрибутами HTML. +* Щоб передати пропси, додайте їх до JSX подібно до атрибутів HTML. * Щоб прочитати пропси, використовуйте синтаксис деструктуризації `function Avatar({ person, size })`. * Ви можете вказати значення за замовчуванням, наприклад, `size = 100`, яке використовується для відсутніх та `undefined` пропсів. * Ви можете передати всі пропси JSX за допомогою синтаксису розширення ``, але не зловживайте цим! * Вкладений JSX, наприклад ``, буде виглядати як проп `children` компонента `Card`. * Пропси в момент часу можуть бути використані тільки для читання: кожен рендер отримує нову версію пропсів. -* Ви не можете змінювати пропси. Коли вам потрібна взаємодія, вам потрібно встановити стан. +* Ви не можете змінювати пропси. Для інтерактивності використовуйте стан. @@ -524,7 +524,7 @@ li { margin: 5px; } -Почніть з винесення розмітки для одного з вчених. Потім знайдіть частини, які не відповідають йому в другому прикладі, і зробіть їх налаштовуваними за допомогою пропсів. +Почніть з винесення розмітки для одного з вчених. Потім знайдіть частини, які не відповідають їй у другому прикладі, і зробіть їх налаштовуваними за допомогою пропсів. @@ -630,9 +630,9 @@ li { margin: 5px; } -Зверніть увагу, якщо `awards` є масивом, вам не потрібен окремий проп `awardCount`. Тоді ви можете використовувати `awards.length`, щоб підрахувати кількість нагород. Пам'ятайте, що пропси можуть приймати будь-які значення, включаючи масиви! +Зверніть увагу: якщо `awards` є масивом, вам не потрібний окремий проп `awardCount`. У цьому випадку ви можете використовувати `awards.length`, щоб підрахувати кількість нагород. Пам'ятайте, що пропси можуть приймати будь-які значення, включаючи масиви! -Ще одне рішення, яке більше схоже на попередні приклади на цій сторінці, полягає в тому, щоб групувати всю інформацію про людину в один об'єкт і передавати цей об'єкт як один проп: +Ще одне рішення, яке більш схоже на попередні приклади на цій сторінці, полягає в тому, щоб групувати всю інформацію про людину в один об'єкт і передавати цей об'єкт як один проп: @@ -733,9 +733,9 @@ li { margin: 5px; } #### Налаштування розміру зображення на основі пропу {/*adjust-the-image-size-based-on-a-prop*/} -У цьому прикладі `Avatar` отримує числовий проп `size`, який визначає ширину та висоту елемента ``. У цьому прикладі проп `size` встановлено на `40`. Однак, якщо ви відкриєте зображення в новій вкладці, ви помітите, що саме зображення більше (`160` пікселів). Розмір реального зображення визначається розміром ескізу, який ви запитуєте. +У цьому прикладі компонент `Avatar` отримує числовий проп `size`, який визначає ширину та висоту елемента ``. Для пропу `size` задано значення `40`. Однак, якщо ви відкриєте зображення в новій вкладці, ви помітите, що саме зображення є більшим (`160` пікселів). Справжній розмір зображення визначається розміром ескізу, який ви запитуєте. -Змініть компонент `Avatar`, щоб він запитував найближчий розмір зображення на основі пропу `size`. Зокрема, якщо `size` менше `90`, передайте `'s'` ("малий(small)") замість `'b'` ("великий(big)") до функції `getImageUrl`. Переконайтеся, що ваші зміни працюють, рендеруючи аватари з різними значеннями пропу `size` та відкриваючи зображення в новій вкладці. +Змініть компонент `Avatar`, щоб він запитував найближчий розмір зображення на основі пропу `size`. Зокрема, якщо `size` менше `90`, передайте `'s'` (від англ. «small» — малий) замість `'b'` (від англ. «big» — великий) у функцію `getImageUrl`. Переконайтеся, що ваші зміни працюють, виконуючи рендер аватарів з різними значеннями пропу `size` та відкриваючи зображення в новій вкладці. @@ -786,7 +786,7 @@ export function getImageUrl(person, size) { -Ось як ви можете з цим справитися: +Ось як ви можете з цим упоратися: @@ -848,7 +848,7 @@ export function getImageUrl(person, size) { -Ви також можете показати більш чітке зображення для екранів з високою щільністю пікселів, враховуючи [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio): +Ви також можете показати більш чітке зображення для екранів з високою щільністю пікселів, ураховуючи [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio):