diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md
index da5fc5efc..ebe4ac405 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() {
@@ -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-компонента принимает единственный аргумент -- объект с `пропсами`:
```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/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D0%BB%D0%B5%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D0%B0_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B8) и равнозначен чтению свойств из параметра функции:
```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*/}
+## Передача пропсов в 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`. Так как непосредственно сам компонент не использует пропсы, имеет смысл использовать более краткую запись и оператор расширения:
```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 через проп children {/*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.
+Однако, пропсы [неизменяемы (immutable)](https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82) —- термин в информатике, обозначающий объект, который не может быть изменён после создания. Когда компоненту нужно поменять его пропсы (например, в результате действий пользователя или обновления данных), он должен «спросить» у родительского компонента _другие пропсы_ -— новый объект! Старые пропсы окажутся ненужными, и в итоге движок 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
+
Мария Склодовская-Кюри
- Profession:
- physicist and chemist
+ Профессия:
+ физик и химик
- Awards: 4
- (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
+ Награды: 4
+ (Нобелевская премия по физике, Нобелевская премия по химии, медаль Дэви, медаль Маттеуччи)
- 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` (строка), and `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}
/>
@@ -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:
+Другое решение, которое больше похоже на примеры на этой странице -- сгруппировать всю информацию об учёной в один объект и передать его одним пропом:
@@ -654,14 +654,14 @@ function Profile({ person, imageSize = 70 }) {
/>
@@ -672,27 +672,27 @@ function Profile({ person, imageSize = 70 }) {
export default function Gallery() {
return (
-
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/ru/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
+
Фото
@@ -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` в обоих местах:
@@ -1008,18 +1008,18 @@ export default function Profile() {
return (
-
Photo
+
Фото
-
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` всегда был заголовок:
@@ -1070,17 +1070,17 @@ function Card({ children, title }) {
export default function Profile() {
return (
-
+
-
-
Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.
+
+
Аклилу Лемма был выдающимся эфиопским учёным, который обнаружил натуральный способ лечения шистоматоза.
@@ -51,11 +51,11 @@ body { min-height: 120px; }
@@ -947,8 +947,8 @@ export default function Profile() {