diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index da5fc5efc..187396af6 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`. +Пропсы дазваляюць вам успрымаць бацькоўскі і даччыны кампаненты незалежнымі адзін ад аднаго. Напрыклад, вы можаце змяніць пропсы `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`, ягоным значэннем будзе `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*/} +## Перадача пропсаў з выкарыстаннем сінтаксіса разгортвання {/*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`. Так як кампанент не выкарыстоўвае ўласныя пропсы сам, ёсць сэнс скарыстаць больш лаканічны сінтаксіс разгортвання: ```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! +**Карыстайцеся аператарам разгортвання разумна.** Калі вы пачынаеце выкарыстоўваць яго ў кожным кампаненце, вы штосьці робіце не так. Часта гэта прыкмета таго, што варта раздзяліць кампаненты і перадаць даччыныя ў выглядзе 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,11 +392,11 @@ export default function App() { return (

- Pick a color:{' '} + Абярыце колер:{' '}

@@ -407,21 +407,21 @@ export default function App() { -This example illustrates that **a component may receive different props over time.** Props are not always static! Here, the `time` prop changes every second, and the `color` prop changes when you select another color. Props reflect a component's data at any point in time, rather than only in the beginning. +Дадзены прыклад адлюстроўвае, што **пропсы, якія кампанент атрымлівае, могуць змяняцца з часам**. Пропсы не заўсёды статычныя! Тут, напрыклад, пропс `time` змяняецца кожную секунду, а пропс `color` змяняецца падчас выбару іншага колеру. Пропсы змяшчаюць даныя кампанента ў канкрэтны момант, а не толькі ў момант першага рэндэру. -However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)—a term from computer science meaning "unchangeable". When a component needs to change its props (for example, in response to a user interaction or new data), it will have to "ask" its parent component to pass it _different props_—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them. +Не гледзячы на гэта, пропсы [нязменныя](https://en.wikipedia.org/wiki/Immutable_object) — гэты тэрмін азначае аб’ект, які не можа змяняцца пасля стварэння. Калі кампаненту трэба змяніць пропс (напрыклад, у адказ на ўзаемадзеянне з боку карыстальніка ці новыя даныя), яму давядзецца «папрасіць» бацькоўскі кампанент перадаць новы _іншы пропс_ — новаствораны аб’ект! Старыя пропсы будуць адкінутыя, і ў рэшце рэшт рухавік JavaScript выдаліць іх з памяці. -**Don't try to "change props".** When you need to respond to the user input (like changing the selected color), you will need to "set state", which you can learn about in [State: A Component's Memory.](/learn/state-a-components-memory) +**Не спрабуйце «змяняць пропсы». **Калі вы хочаце адрэагаваць на ўведзеныя карыстальнікам даныя (напрыклад, змену колеру), вам спатрэбіцца «задаць стан». Падрабязней пра гэта вы можаце даведацца на старонцы «[Стан: Памяць кампанента.](/learn/state-a-components-memory)» -* To pass props, add them to the JSX, just like you would with HTML attributes. -* To read props, use the `function Avatar({ person, size })` destructuring syntax. -* You can specify a default value like `size = 100`, which is used for missing and `undefined` props. -* You can forward all props with `` JSX spread syntax, but don't overuse it! -* Nested JSX like `` will appear as `Card` component's `children` prop. -* Props are read-only snapshots in time: every render receives a new version of props. -* You can't change props. When you need interactivity, you'll need to set state. +* Каб перадаць пропсы, дадайце іх у JSX як бы вы дадалі атрыбуты ў HTML. +* Каб прачытаць пропсы, скарыстайце дэструктурызацыйны сінтаксіс: `function Avatar({ person, size })`. +* Вы можаце задаць прадвызначанае значэнне для пропса: `size = 100`, яно будзе скарыстана, калі пропс адсутнічае ці ягонае значэнне `undefined`. +* Вы можаце перадаць усе пропсы даччынаму элементу, скарыстаўшы сінтаксіс разгортвання: ``. Але не выкарыстоўвайце яго зашмат! +* Укладзены JSX, такі як ``, з’явіцца ў кампаненце `Card` у якасці пропсы `children`. +* Пропсы нязменны і адлюстроўваюць толькі цяперашні стан: пры кожны рэндэры кампанент атрымлівае новую версію пропсаў. +* Вы не можаце змяняць пропсы. Калі вам патрэбная інтэрактыўнасць, вам спатрэбіцца задаць стан. @@ -429,9 +429,9 @@ However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object) -#### Extract a component {/*extract-a-component*/} +#### Вынесіце кампанент {/*extract-a-component*/} -This `Gallery` component contains some very similar markup for two profiles. Extract a `Profile` component out of it to reduce the duplication. You'll need to choose what props to pass to it. +Дадзены кампанент `Gallery` змяшчае вельмі падобную разметку для двух профіляў. Вынесіце яе ў кампанент `Profile`, каб паменшыць колькасць кода, які паўтараецца. Вам давядзецца выбраць, якія пропсы вам спатрэбіцца перадаваць. @@ -441,52 +441,52 @@ import { getImageUrl } from './utils.js'; export default function Gallery() { return (
-

Notable Scientists

+

Выбітныя навукоўцы

-

Maria Skłodowska-Curie

+

Марыя Складоўская-Кюры

Maria Skłodowska-Curie
  • - Profession: - physicist and chemist + Сфера дзейнасці: + фізіка і хімія
  • - Awards: 4 - (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal) + Нагароды: 4 + (Нобелеўская прэмія па фізіцы, Нобелеўская прэмія па хіміі, медаль Дэві, медаль Матэуччы)
  • - Discovered: - polonium (element) + Адкрыццё: + Палоній (элемент)
-

Katsuko Saruhashi

+

Кацуко Сарухасі

Katsuko Saruhashi
  • - Profession: - geochemist + Сфера дзейнасці: + геахімія
  • - Awards: 2 - (Miyake Prize for geochemistry, Tanaka Prize) + Нагароды: 2 + (прыз Міякэ па геахіміі, прыз Танака)
  • - Discovered: - a method for measuring carbon dioxide in seawater + Адкрыццё: + метад вымярэння вуглякіслага газу ў марской вадзе
@@ -524,15 +524,15 @@ li { margin: 5px; } -Start by extracting the markup for one of the scientists. Then find the pieces that don't match it in the second example, and make them configurable by props. +Пачніце з таго, каб вынесці разметку для аднаго з навукоўцаў. Потым знайдзіце часткі, якія не супадаюць з другім прыкладам, і зрабіце іх пераменнымі з дапамогай пропсаў. -In this solution, the `Profile` component accepts multiple props: `imageId` (a string), `name` (a string), `profession` (a string), `awards` (an array of strings), `discovery` (a string), and `imageSize` (a number). +У дадзеным прыкладзе кампанент `Profile` прымае шэраг пропсаў: `imageId` (радок), `name` (радок), `profession` (радок), `awards` (масіў радкоў), `discovery` (радок) і `imageSize` (нумар). -Note that the `imageSize` prop has a default value, which is why we don't pass it to the component. +Заўважце, што пропс `imageSize` мае прадвызначанае значэнне, менавіта таму мы не перадаём яго з бацькоўскага кампанента. @@ -558,13 +558,13 @@ function Profile({ height={imageSize} />
    -
  • Profession: {profession}
    • +
  • Сфера дзейнасці: {profession}
  • - Awards: {awards.length} + Узнагароды: {awards.length} ({awards.join(', ')})
  • - Discovered: + Адкрыццё: {discovery}
@@ -575,27 +575,27 @@ function Profile({ export default function Gallery() { return (
-

Notable Scientists

+

Выбітныя навукоўцы

@@ -630,9 +630,9 @@ li { margin: 5px; } -Note how you don't need a separate `awardCount` prop if `awards` is an array. Then you can use `awards.length` to count the number of awards. Remember that props can take any values, and that includes arrays too! +Заўважце, што няма патрэбы ў тым, каб вылучаць `awardCount` у асобны пропс, бо `awards` — масіў. Можна выкарыстоўваць `awards.length` для колькасці ўзнагарод. Памятайце, што ў пропсы могуць быць перададзеныя любыя значэнні, у тым ліку і масівы! -Another solution, which is more similar to the earlier examples on this page, is to group all information about a person in a single object, and pass that object as one prop: +Іншым рашэннем, больш падобным на папярэднія прыклады, будзе згрупаваць усе даныя пра асобу ў аб’ект і перадаць яго ў якасці аднаго пропса: @@ -675,24 +675,24 @@ export default function Gallery() {

Notable Scientists

@@ -727,15 +727,15 @@ li { margin: 5px; } -Although the syntax looks slightly different because you're describing properties of a JavaScript object rather than a collection of JSX attributes, these examples are mostly equivalent, and you can pick either approach. +Не гледзячы на тое, што сінтаксіс выглядае крыху інакш, бо вы апісваеце параметры JavaScript аб’екта, а не перадаяце асобныя пропсы ў якасці JSX атрыбутаў, абодва прыклады даюць патрэбны вынік, таму вы можаце выкарыстоўваць любы з гэтых падыходаў. -#### Adjust the image size based on a prop {/*adjust-the-image-size-based-on-a-prop*/} +#### Рэгуляванне памеру відарыса пропсам {/*adjust-the-image-size-based-on-a-prop*/} -In this example, `Avatar` receives a numeric `size` prop which determines the `` width and height. The `size` prop is set to `40` in this example. However, if you open the image in a new tab, you'll notice that the image itself is larger (`160` pixels). The real image size is determined by which thumbnail size you're requesting. +У дадзеным выпадку `Avatar` атрымлівае памер у лічбах праз пропс `size`, што задае шырыню і вышыню для элемента ``. У дадзеным прыкладзе пропс `size` мае значэнне `40`. Але калі вы адкрыеце відарыс ў новай вокладцы, вы пабачыце, што памер самога відарыса значна большы (`160` пікселяў). Сапраўдны памер відарыса вызначаецца памерам мініяцюры, якую вы запытваеце. -Change the `Avatar` component to request the closest image size based on the `size` prop. Specifically, if the `size` is less than `90`, pass `'s'` ("small") rather than `'b'` ("big") to the `getImageUrl` function. Verify that your changes work by rendering avatars with different values of the `size` prop and opening images in a new tab. +Змяніце кампанент `Avatar` так, каб запытваць відарыс найбольш падыходзячага памеру, базуючыся на пропсе `size`. Канкрэтна, калі `size` меней за `90`, перадайце `'s'` («small») замест `'b'` («big») у функцыю `getImageUrl`. Пераканайцеся, што вашыя змены працуюць, паспрабаваўшы адрэндэрыць аватары з рознымі значэннямі пропса `size` і адкрыць відарыс у новай укладцы. @@ -759,7 +759,7 @@ export default function Profile() { @@ -786,7 +786,7 @@ export function getImageUrl(person, size) { -Here is how you could go about it: +Вось адно з магчымых рашэнняў: @@ -815,14 +815,14 @@ export default function Profile() { @@ -848,7 +848,7 @@ export function getImageUrl(person, size) { -You could also show a sharper image for high DPI screens by taking [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) into account: +Таксама вы можаце паказваць больш рэзкі відарыс, базуючыся на DPI прылады, узяўшы ва ўлік [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio): @@ -879,21 +879,21 @@ export default function Profile() { @@ -919,13 +919,13 @@ export function getImageUrl(person, size) { -Props let you encapsulate logic like this inside the `Avatar` component (and change it later if needed) so that everyone can use the `` component without thinking about how the images are requested and resized. +Пропсы дазваляюць інкапсуляваць логіку як у прыкладзе з кампанентам `Avatar` (і змяняць пазней пры патрэбе), каб кожны, хто выкарыстоўвае кампанент ``, маглі гэта рабіць не задумваючыся аб тым, якім чынам відарыс будзе запытаны і ў якім памеры. -#### Passing JSX in a `children` prop {/*passing-jsx-in-a-children-prop*/} +#### Перадача JSX праз пропс `children` {/*passing-jsx-in-a-children-prop*/} -Extract a `Card` component from the markup below, and use the `children` prop to pass different JSX to it: +Вынесіце кампанент `Card` з разметкі ніжэй і скарыстайце пропс `children`, каб перадаваць у яго розную JSX разметку: @@ -935,11 +935,11 @@ export default function Profile() {
-

Photo

+

Фота

Aklilu Lemma @@ -947,8 +947,8 @@ export default function Profile() {
-

About

-

Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.

+

Пра навукоўца

+

Аклілу Лема быў выбітным Эфіопскім навукоўцам, хто адкрыў натуральны спосаб лячэння шыстасамозу.

@@ -983,13 +983,13 @@ h1 { -Any JSX you put inside of a component's tag will be passed as the `children` prop to that component. +Любая JSX разметка ўнутры тэга кампанента будзе перададзеная ў якасці пропса `children` у гэты кампанент. -This is how you can use the `Card` component in both places: +Вось як вы можаце выкарыстоўваць кампанент `Card` у абодвух выпадках: @@ -1012,14 +1012,14 @@ export default function Profile() { Aklilu Lemma

About

-

Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.

+

Аклілу Лема быў выбітным Эфіопскім навукоўцам, хто адкрыў натуральны спосаб лячэння шыстасамозу.
); @@ -1051,7 +1051,7 @@ h1 { -You can also make `title` a separate prop if you want every `Card` to always have a title: +Таксама вы можаце зрабіць `title` асобным пропсам, калі хочаце, каб кожны `Card` меў загаловак: @@ -1074,13 +1074,13 @@ export default function Profile() { Aklilu Lemma -

Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.

+

Аклілу Лема быў выбітным Эфіопскім навукоўцам, хто адкрыў натуральны спосаб лячэння шыстасамозу.
); diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index e2df1d727..2001393bc 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -68,7 +68,7 @@ "path": "/learn/javascript-in-jsx-with-curly-braces" }, { - "title": "Passing Props to a Component", + "title": "Перадача пропсаў у кампанент", "path": "/learn/passing-props-to-a-component" }, {