Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
  • Loading branch information
@bkatsevych
bkatsevych authored Nov 9, 2023
1 parent 2162acd commit ed7729a
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions src/content/learn/passing-props-to-a-component.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ body { min-height: 120px; }

</Sandpack>

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

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

Expand All @@ -192,7 +192,7 @@ function Avatar({ person, size }) {
}
```

Цей синтаксис називається ["деструктуризація"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) і еквівалентний читанню пропів з параметра функції:
Цей синтаксис називається ["деструктуризація"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) і еквівалентний читанню пропcів з параметра функції:

```js
function Avatar(props) {
Expand All @@ -206,7 +206,7 @@ function Avatar(props) {

## Вказання значення за замовчуванням для пропа {/*specifying-a-default-value-for-a-prop*/}

Якщо ви хочете задати пропу значення за замовчуванням, на яке він посилатиметься, якщо не вказано іншого, ви можете зробити це з деструктуризацією, поставивши `=` та значення за замовчуванням відразу після параметра:
Якщо ви хочете задати пропу значення за замовчуванням, на яке він посилатиметься, якщо не вказано іншого, ви можете зробити це завдяки деструктуризації, поставивши `=` та значення за замовчуванням відразу після параметра:

```js
function Avatar({ person, size = 100 }) {
Expand Down Expand Up @@ -237,7 +237,7 @@ function Profile({ person, size, isSepia, thickBorder }) {
}
```

Немає нічого поганого в повторюваному коді — це може бути більш зрозумілим. Але іноді ви можете цінувати лаконічність. Деякі компоненти передають всі свої пропси своїм дочірнім компонентам, як це робить `Profile` з `Avatar`. Оскільки вони не використовують жоден зі своїх пропсів безпосередньо, може бути розумним використовувати більш лаконічний синтаксис "spread":
Немає нічого поганого в повторюваному коді — він може бути більш зрозумілим. Але іноді ви можете цінувати лаконічність. Деякі компоненти передають всі свої пропси своїм дочірнім компонентам, як це робить `Profile` з `Avatar`. Оскільки вони не використовують жоден зі своїх пропсів напряму, розумніше буде вжити лаконічний синтаксис "spread":

```js
function Profile(props) {
Expand All @@ -251,7 +251,7 @@ function Profile(props) {

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

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

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

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,17 +347,17 @@ export function getImageUrl(person, size = 's') {

</Sandpack>

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

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

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

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

Компонент `Clock`, наведений нижче, отримує два пропи від батьківського компонента: `color` та `time`. (Код батьківського компонента опущено, оскільки він використовує [стан](/learn/state-a-components-memory), про який ми ще не говорили.)
Компонент `Clock`, наведений нижче, отримує два пропси від батьківського компонента: `color` та `time`. (Код батьківського компонента не вказаний, оскільки він використовує [стан](/learn/state-a-components-memory), до деталей якого ми поки не будемо вдаватись.)

Спробуйте змінити колір у випадаючому списку нижче:
Спробуйте змінити колір у полі вибору нижче:

<Sandpack>

Expand Down Expand Up @@ -411,14 +411,14 @@ export default function App() {

Однак, пропси є [незмінними (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 за допомогою `spread` синтаксису `<Avatar {...props} />`, але не зловживайте цим!
* Вкладений JSX, наприклад `<Card><Avatar /></Card>`, буде виглядати як проп `children` компонента `Card`.
* Пропси в момент часу можуть бути використані тільки для читання: кожен рендер отримує нову версію пропсів.
* Ви не можете змінювати пропси. Для інтерактивності використовуйте стан.
Expand Down Expand Up @@ -530,7 +530,7 @@ li { margin: 5px; }

<Solution>

У цьому рішенні компонент `Profile` приймає кілька пропсів: `imageId` (рядок), `name` (рядок), `profession` (рядок), `awards` (масив рядків), `discovery` (рядок) і `imageSize` (число).
У цьому рішенні компонент `Profile` приймає кілька пропсів: `imageId` (стрічка), `name` (стрічка), `profession` (стрічка), `awards` (масив стрічок), `discovery` (стрічка) і `imageSize` (число).

Зверніть увагу, що проп `imageSize` має значення за замовчуванням, тому ми не передаємо його до компонента.

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

У цьому прикладі компонент `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

0 comments on commit ed7729a

Please sign in to comment.