Skip to content

Commit

Permalink
Apply suggestions from code review by @alinkedd
Browse files Browse the repository at this point in the history 
Co-authored-by: Alina Listunova <alinkedd@users.noreply.github.com>
  • Loading branch information
@ltlaitoff @alinkedd
ltlaitoff and alinkedd committed Nov 8, 2023
1 parent 4f0ea90 commit f496e9c
Showing 1 changed file with 19 additions and 19 deletions.
38 changes: 19 additions & 19 deletions src/content/learn/passing-props-to-a-component.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ title: Передача пропсів до компонента

## Знайомі пропси {/*familiar-props*/}

Пропси — це інформація, яку ви передаєте до тегу JSX. Наприклад, `className`, `src`, `alt`, `width` та `height` деякі з пропсів, які ви можете передати до тегу `<img>`:
Пропси — це інформація, яку ви передаєте до тегу JSX. Наприклад, `className`, `src`, `alt`, `width` та `height` — деякі з пропсів, які ви можете передати до тегу `<img>`:

<Sandpack>

Expand Down Expand Up @@ -100,7 +100,7 @@ function Avatar({ person, size }) {
}
```

Додайте деяку логіку до `Avatar`, яка використовує пропси `person` та `size` для відображення і готово.
Додайте трохи логіки до `Avatar`, яка використовує пропси `person` та `size` для відображення, і готово.

Тепер ви можете налаштувати `Avatar` для відображення багатьма різними способами з різними пропсами. Спробуйте змінити значення!

Expand Down Expand Up @@ -170,7 +170,7 @@ body { min-height: 120px; }

Props дозволяють вам думати про батьківські та дочірні компоненти незалежно. Наприклад, ви можете змінити проп `person` або `size` всередині `Profile`, не думаючи про те, як `Avatar` використовує їх. Аналогічно, ви можете змінити спосіб використання `Avatar` цих пропсів, не звертаючи уваги на `Profile`.

Ви можете уявляти пропси як "ручки", які ви можете налаштовувати. Вони виконують ту саму роль, що і аргументи для функцій - насправді, пропси _є_ єдиним аргументом вашого компонента! Функції компонентів React приймають один аргумент - об'єкт `props`:
Уявіть пропси як «ручки регулювання», які ви можете налаштовувати. Вони виконують ту саму роль, що і аргументи для функцій — насправді, пропси _є_ єдиним аргументом вашого компонента! Функції компонентів React приймають один аргумент — об'єкт `props`:

```js
function Avatar(props) {
Expand Down Expand Up @@ -251,11 +251,11 @@ function Profile(props) {

Це передає всі пропси `Profile` до `Avatar` без перерахування кожного з їх імен.

**Використовуйте синтаксис spread з обережністю.** Якщо ви використовуєте його в кожному другому компоненті щось пішло не так. Часто це означає, що вам слід розбити ваші компоненти і передавати дітей як JSX. Детальніше про це далі!
**Використовуйте синтаксис spread з обережністю.** Якщо ви використовуєте його в кожному наступному компоненті, то щось пішло не так. Часто це свідчить про те, що вам слід розбити компоненти і передавати дітей як JSX. Детальніше про це далі!

## Передача JSX як дітей {/*passing-jsx-as-children*/}

Вкладення вбудованих тегів браузера є звичайним ділом:
Вкладення вбудованих тегів браузера є звичайною справою:

```js
<div>
Expand All @@ -271,7 +271,7 @@ function Profile(props) {
</Card>
```

Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children`, встановлену на `<Avatar />` і відображатиме його в обгортковому div:
Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children` зі значенням `<Avatar />` і відображатиме його в обгортковому div:

<Sandpack>

Expand Down Expand Up @@ -347,11 +347,11 @@ export function getImageUrl(person, size = 's') {

</Sandpack>

Спробуйте замінити `<Avatar>` всередині `<Card>` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон в багатьох місцях.
Спробуйте замінити `<Avatar>` всередині `<Card>` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон у багатьох місцях.

Ви можете уявляти компонент з пропом `children` як компонент з "отвіром", який може бути "заповнений" батьківськими компонентами з довільним JSX. Ви часто будете використовувати властивість `children` для візуальних обгорток: панелей, сіток і т.д.

<Illustration src="/images/docs/illustrations/i_children-prop.png" alt='Подібна до головоломки плитка Card з слотами для "дочірніх" шматочків, наприклад текст або Avatar' />
<Illustration src="/images/docs/illustrations/i_children-prop.png" alt='Подібна до головоломки плитка Card зі слотами для "дочірніх" шматочків, наприклад текст або Avatar' />

## Як пропси змінюються з часом {/*how-props-change-over-time*/}

Expand Down Expand Up @@ -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)

<Recap>

* Щоб передати пропси, додайте їх до JSX, так само, як ви робите з атрибутами HTML.
* Щоб передати пропси, додайте їх до JSX подібно до атрибутів HTML.
* Щоб прочитати пропси, використовуйте синтаксис деструктуризації `function Avatar({ person, size })`.
* Ви можете вказати значення за замовчуванням, наприклад, `size = 100`, яке використовується для відсутніх та `undefined` пропсів.
* Ви можете передати всі пропси JSX за допомогою синтаксису розширення `<Avatar {...props} />`, але не зловживайте цим!
* Вкладений JSX, наприклад `<Card><Avatar /></Card>`, буде виглядати як проп `children` компонента `Card`.
* Пропси в момент часу можуть бути використані тільки для читання: кожен рендер отримує нову версію пропсів.
* Ви не можете змінювати пропси. Коли вам потрібна взаємодія, вам потрібно встановити стан.
* Ви не можете змінювати пропси. Для інтерактивності використовуйте стан.

</Recap>

Expand Down Expand Up @@ -524,7 +524,7 @@ li { margin: 5px; }

<Hint>

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

</Hint>

Expand Down Expand Up @@ -630,9 +630,9 @@ li { margin: 5px; }

</Sandpack>

Зверніть увагу, якщо `awards` є масивом, вам не потрібен окремий проп `awardCount`. Тоді ви можете використовувати `awards.length`, щоб підрахувати кількість нагород. Пам'ятайте, що пропси можуть приймати будь-які значення, включаючи масиви!
Зверніть увагу: якщо `awards` є масивом, вам не потрібний окремий проп `awardCount`. У цьому випадку ви можете використовувати `awards.length`, щоб підрахувати кількість нагород. Пам'ятайте, що пропси можуть приймати будь-які значення, включаючи масиви!

Ще одне рішення, яке більше схоже на попередні приклади на цій сторінці, полягає в тому, щоб групувати всю інформацію про людину в один об'єкт і передавати цей об'єкт як один проп:
Ще одне рішення, яке більш схоже на попередні приклади на цій сторінці, полягає в тому, щоб групувати всю інформацію про людину в один об'єкт і передавати цей об'єкт як один проп:

<Sandpack>

Expand Down Expand Up @@ -733,9 +733,9 @@ li { margin: 5px; }

#### Налаштування розміру зображення на основі пропу {/*adjust-the-image-size-based-on-a-prop*/}

У цьому прикладі `Avatar` отримує числовий проп `size`, який визначає ширину та висоту елемента `<img>`. У цьому прикладі проп `size` встановлено на `40`. Однак, якщо ви відкриєте зображення в новій вкладці, ви помітите, що саме зображення більше (`160` пікселів). Розмір реального зображення визначається розміром ескізу, який ви запитуєте.
У цьому прикладі компонент `Avatar` отримує числовий проп `size`, який визначає ширину та висоту елемента `<img>`. Для пропу `size` задано значення `40`. Однак, якщо ви відкриєте зображення в новій вкладці, ви помітите, що саме зображення є більшим (`160` пікселів). Справжній розмір зображення визначається розміром ескізу, який ви запитуєте.

Змініть компонент `Avatar`, щоб він запитував найближчий розмір зображення на основі пропу `size`. Зокрема, якщо `size` менше `90`, передайте `'s'` ("малий(small)") замість `'b'` ("великий(big)") до функції `getImageUrl`. Переконайтеся, що ваші зміни працюють, рендеруючи аватари з різними значеннями пропу `size` та відкриваючи зображення в новій вкладці.
Змініть компонент `Avatar`, щоб він запитував найближчий розмір зображення на основі пропу `size`. Зокрема, якщо `size` менше `90`, передайте `'s'` (від англ. «small» — малий) замість `'b'` (від англ. «big» — великий) у функцію `getImageUrl`. Переконайтеся, що ваші зміни працюють, виконуючи рендер аватарів з різними значеннями пропу `size` та відкриваючи зображення в новій вкладці.

<Sandpack>

Expand Down Expand Up @@ -786,7 +786,7 @@ export function getImageUrl(person, size) {

<Solution>

Ось як ви можете з цим справитися:
Ось як ви можете з цим упоратися:

<Sandpack>

Expand Down Expand Up @@ -848,7 +848,7 @@ export function getImageUrl(person, size) {

</Sandpack>

Ви також можете показати більш чітке зображення для екранів з високою щільністю пікселів, враховуючи [`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):

<Sandpack>

Expand Down

0 comments on commit f496e9c

Please sign in to comment.