From 1d3030737ad2d4005220f39288ac562146dccfb3 Mon Sep 17 00:00:00 2001 From: ltlaitoff Date: Tue, 7 Nov 2023 09:04:25 +0200 Subject: [PATCH] Finished translation of "Passing Props to a Component" page --- .../learn/passing-props-to-a-component.md | 298 +++++++++--------- 1 file changed, 149 insertions(+), 149 deletions(-) diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index 8e756c2f3..74192b5c0 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -1,26 +1,26 @@ --- -title: Passing Props to a Component +title: Передача пропсів до компонента --- -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions. +Компоненти React використовують *пропси* для взаємодії між собою. Кожен батьківський компонент може передати деяку інформацію своїм дочірнім компонентам, передаючи їм пропси. Пропси можуть нагадувати вам HTML-атрибути, але ви можете передавати через них будь-яке значення JavaScript, включаючи об'єкти, масиви та функції. -* How to pass props to a component -* How to read props from a component -* How to specify default values for props -* How to pass some JSX to a component -* How props change over time +* Як передавати пропси до компонента +* Як читати пропси з компонента +* Як встановлювати значення за замовчуванням для пропсів +* Як передавати JSX до компонента +* Як пропси змінюються з часом -## Familiar props {/*familiar-props*/} +## Знайомі пропси {/*familiar-props*/} -Props are the information that you pass to a JSX tag. For example, `className`, `src`, `alt`, `width`, and `height` are some of the props you can pass to an ``: +Пропси — це інформація, яку ви передаєте до тегу JSX. Наприклад, `className`, `src`, `alt`, `width` та `height` деякі з пропсів, які ви можете передати до тегу ``: @@ -30,7 +30,7 @@ function Avatar() { Lin Lanying @@ -51,11 +51,11 @@ body { min-height: 120px; } -The props you can pass to an `` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as ``, to customize them. Here's how! +Пропси, які ви можете передати до тегу ``, визначені заздалегідь (ReactDOM відповідає [стандарту HTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). Але ви можете передати будь-які пропси до *власних* компонентів, таких як ``, щоб налаштувати їх. Ось як це зробити! -## Passing props to a component {/*passing-props-to-a-component*/} +## Передача пропсів до компонента {/*passing-props-to-a-component*/} -In this code, the `Profile` component isn't passing any props to its child component, `Avatar`: +У цьому коді компонент `Profile` не передає жодних пропсів до свого дочірнього компонента `Avatar`: ```js export default function Profile() { @@ -65,17 +65,17 @@ export default function Profile() { } ``` -You can give `Avatar` some props in two steps. +Ви можете передати деякі пропси до компонента `Avatar` у два кроки. -### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/} +### Крок 1: Передайте пропси до дочірнього компонента {/*step-1-pass-props-to-the-child-component*/} -First, pass some props to `Avatar`. For example, let's pass two props: `person` (an object), and `size` (a number): +Спочатку передайте деякі пропси до `Avatar`. Наприклад, давайте передамо два пропси: `person` (об'єкт) і `size` (число): ```js export default function Profile() { return ( ); @@ -84,25 +84,25 @@ export default function Profile() { -If double curly braces after `person=` confuse you, recall [they're merely an object](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) inside the JSX curlies. +Якщо подвійні фігурні дужки після `person=` вас збивають з пантелику, згадайте, що [вони просто об'єкт](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) всередині фігурних дужок JSX. -Now you can read these props inside the `Avatar` component. +Тепер ви можете читати ці пропси всередині компонента `Avatar`. -### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/} +### Крок 2: Читайте пропси всередині дочірнього компонента {/*step-2-read-props-inside-the-child-component*/} -You can read these props by listing their names `person, size` separated by the commas inside `({` and `})` directly after `function Avatar`. This lets you use them inside the `Avatar` code, like you would with a variable. +Ви можете прочитати ці пропси, перераховуючи їх назви `person, size`, розділені комами всередині `({` та `})` безпосередньо після `function Avatar`. Це дозволяє використовувати їх всередині коду `Avatar` як змінні. ```js function Avatar({ person, size }) { - // person and size are available here + // person та size доступні тут } ``` -Add some logic to `Avatar` that uses the `person` and `size` props for rendering, and you're done. +Додайте деяку логіку до `Avatar`, яка використовує пропси `person` та `size` для відображення і готово. -Now you can configure `Avatar` to render in many different ways with different props. Try tweaking the values! +Тепер ви можете налаштувати `Avatar` для відображення багатьма різними способами з різними пропсами. Спробуйте змінити значення! @@ -127,21 +127,21 @@ export default function Profile() { @@ -168,9 +168,9 @@ body { min-height: 120px; } -Props let you think about parent and child components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`. +Props дозволяють вам думати про батьківські та дочірні компоненти незалежно. Наприклад, ви можете змінити проп `person` або `size` всередині `Profile`, не думаючи про те, як `Avatar` використовує їх. Аналогічно, ви можете змінити спосіб використання `Avatar` цих пропсів, не звертаючи уваги на `Profile`. -You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your component! React component functions accept a single argument, a `props` object: +Ви можете уявляти пропси як "ручки", які ви можете налаштовувати. Вони виконують ту саму роль, що і аргументи для функцій - насправді, пропси _є_ єдиним аргументом вашого компонента! Функції компонентів React приймають один аргумент - об'єкт `props`: ```js function Avatar(props) { @@ -180,11 +180,11 @@ function Avatar(props) { } ``` -Usually you don't need the whole `props` object itself, so you destructure it into individual props. +Зазвичай вам не потрібен весь об'єкт `props` сам по собі, тому ви розкладаєте його на окремі пропси. -**Don't miss the pair of `{` and `}` curlies** inside of `(` and `)` when declaring props: +**Не пропустіть пару фігурних дужок `{` та `}` всередині `(` та `)` при оголошенні пропсів: ```js function Avatar({ person, size }) { @@ -192,7 +192,7 @@ function Avatar({ person, size }) { } ``` -This syntax is called ["destructuring"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) and is equivalent to reading properties from a function parameter: +Цей синтаксис називається ["деструктуризація"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) і еквівалентний читанню властивостей з параметра функції: ```js function Avatar(props) { @@ -204,9 +204,9 @@ function Avatar(props) { -## Specifying a default value for a prop {/*specifying-a-default-value-for-a-prop*/} +## Вказання значення за замовчуванням для пропа {/*specifying-a-default-value-for-a-prop*/} -If you want to give a prop a default value to fall back on when no value is specified, you can do it with the destructuring by putting `=` and the default value right after the parameter: +Якщо ви хочете задати пропу значення за замовчуванням, на яке він посилатиметься, якщо не вказано іншого, ви можете зробити це з деструктуризацією, поставивши `=` та значення за замовчуванням відразу після параметра: ```js function Avatar({ person, size = 100 }) { @@ -214,13 +214,13 @@ function Avatar({ person, size = 100 }) { } ``` -Now, if `` is rendered with no `size` prop, the `size` will be set to `100`. +Тепер, якщо `` рендериться без пропу `size`, `size` буде встановлено на `100`. -The default value is only used if the `size` prop is missing or if you pass `size={undefined}`. But if you pass `size={null}` or `size={0}`, the default value will **not** be used. +Значення за замовчуванням використовується тільки у випадку, якщо проп `size` відсутній або якщо ви передаєте `size={undefined}`. Але якщо ви передаєте `size={null}` або `size={0}`, значення за замовчуванням **не буде** використовуватись. -## Forwarding props with the JSX spread syntax {/*forwarding-props-with-the-jsx-spread-syntax*/} +## Передача пропсів за допомогою spread синтаксису JSX {/*forwarding-props-with-the-jsx-spread-syntax*/} -Sometimes, passing props gets very repetitive: +Іноді передача пропсів стає дуже повторюваною: ```js function Profile({ person, size, isSepia, thickBorder }) { @@ -237,7 +237,7 @@ function Profile({ person, size, isSepia, thickBorder }) { } ``` -There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax: +Немає нічого поганого в повторюваному коді — це може бути більш зрозумілим. Але іноді ви можете цінувати лаконічність. Деякі компоненти передають всі свої пропси своїм дочірнім компонентам, як це робить `Profile` з `Avatar`. Оскільки вони не використовують жоден зі своїх пропсів безпосередньо, може бути розумним використовувати більш лаконічний синтаксис "spread": ```js function Profile(props) { @@ -249,13 +249,13 @@ function Profile(props) { } ``` -This forwards all of `Profile`'s props to the `Avatar` without listing each of their names. +Це передає всі пропси `Profile` до `Avatar` без перерахування кожного з їх імен. -**Use spread syntax with restraint.** If you're using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next! +**Використовуйте синтаксис spread з обережністю.** Якщо ви використовуєте його в кожному другому компоненті щось пішло не так. Часто це означає, що вам слід розбити ваші компоненти і передавати дітей як JSX. Детальніше про це далі! -## Passing JSX as children {/*passing-jsx-as-children*/} +## Передача JSX як дітей {/*passing-jsx-as-children*/} -It is common to nest built-in browser tags: +Вкладення вбудованих тегів браузера є звичайним ділом: ```js
@@ -263,7 +263,7 @@ It is common to nest built-in browser tags:
``` -Sometimes you'll want to nest your own components the same way: +Іноді ви захочете вкладати свої власні компоненти так само: ```js @@ -271,7 +271,7 @@ Sometimes you'll want to nest your own components the same way: ``` -When you nest content inside a JSX tag, the parent component will receive that content in a prop called `children`. For example, the `Card` component below will receive a `children` prop set to `` and render it in a wrapper div: +Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children`, встановлену на `` і відображатиме його в обгортковому div: @@ -292,7 +292,7 @@ export default function Profile() { @@ -347,17 +347,17 @@ export function getImageUrl(person, size = 's') { -Try replacing the `` inside `` with some text to see how the `Card` component can wrap any nested content. It doesn't need to "know" what's being rendered inside of it. You will see this flexible pattern in many places. +Спробуйте замінити `` всередині `` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон в багатьох місцях. -You can think of a component with a `children` prop as having a "hole" that can be "filled in" by its parent components with arbitrary JSX. You will often use the `children` prop for visual wrappers: panels, grids, etc. +Ви можете уявляти компонент з пропом `children` як компонент з "отвіром", який може бути "заповнений" батьківськими компонентами з довільним JSX. Ви часто будете використовувати властивість `children` для візуальних обгорток: панелей, сіток і т.д. - + -## How props change over time {/*how-props-change-over-time*/} +## Як пропси змінюються з часом {/*how-props-change-over-time*/} -The `Clock` component below receives two props from its parent component: `color` and `time`. (The parent component's code is omitted because it uses [state](/learn/state-a-components-memory), which we won't dive into just yet.) +Компонент `Clock`, наведений нижче, отримує два пропи від батьківського компонента: `color` та `time`. (Код батьківського компонента опущено, оскільки він використовує [стан](/learn/state-a-components-memory), про який ми ще не говорили.) -Try changing the color in the select box below: +Спробуйте змінити колір у випадаючому списку нижче: @@ -392,7 +392,7 @@ export default function App() { return (

- Pick a color:{' '} + Виберіть колір:{' '}