Урок 2 · React · 20 минут

Props: передаём данные компоненту

Props — это входные данные компонента. Благодаря им один компонент карточки может показать десятки разных товаров, статей или профилей без копирования разметки.

Передача props

function Greeting({ name }) {
  return <h2>Привет, {name}!</h2>;
}

<Greeting name="Маша" />

Значение name передаётся снаружи, а компонент получает его в параметрах. Props нельзя менять внутри компонента: он должен только прочитать их и отобразить результат.

Несколько значений и значение по умолчанию

function Product({ title, price = 0 }) {
  return <p>{title}: {price} ₽</p>;
}

Передавай простые и понятные данные. Если компоненту становится нужно слишком много props, подумай, не стоит ли разбить его на части.

Ошибки

• Пытаться изменить prop внутри компонента.
• Забыть фигурные скобки для JavaScript-значения в JSX.
• Называть props непонятно: лучше isOpen, чем value2.

Props только для чтения

Компонент может использовать значение, но не должен писать в props.title = .... Изменение придёт сверху новым рендером. Если кажется, что props надо поправить локально, почти всегда нужно либо state, либо вычисление обычной переменной прямо в теле функции.

Строка без фигурных скобок — текст. Число, логическое значение и функция передаются в скобках: minutes={20}, onSave={save}. Без скобок число превратится в строку.

function Badge({ children, tone = "neutral" }) {
  return <span className={`badge badge-${tone}`}>{children}</span>;
}

<Badge tone="ok">Открыт набор</Badge>

Значения по умолчанию и отсутствующие данные

Значение по умолчанию в параметрах сработает, если prop не передали. Оно не сработает, если явно передали undefined из пустого поля, это стоит помнить при разборе данных. Не подставляй заглушку вроде «Без названия» глубоко внутри, если пустое название — ошибка данных. Лучше поймать её там, где данные приходят.

Не передавай весь огромный объект «на всякий случай», если карточке нужны два поля. Маленький вход проще увидеть в месте вызова.

Список через props

• Родитель передаёт массив, ребёнок рисует один элемент.
• У элемента списка есть свой стабильный id для key.
• Обработчик передают функцией, а не результатом её вызова.
• Необязательный prop либо имеет запас, либо компонент явно умеет жить без него.

function Lesson({ title, minutes }) { return <p>{title} — {minutes} мин.</p>; }