> Что такое пропсы в React компонентах (React)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: Софт Медиа Групп

Стек: React

> Пример ответа

Пропсы (props) - это сокращение от "properties" (свойства). В React пропсы представляют собой механизм передачи данных от родительского компонента дочернему. Они являются неизменяемыми (immutable) - дочерний компонент не может изменять полученные пропсы, он может только их читать.

Пропсы передаются в виде атрибутов при использовании компонента в JSX. Например:

JSX
<UserCard name="Иван" age={25} />

Внутри компонента UserCard пропсы доступны как объект: props.name и props.age. Также можно использовать деструктуризацию:

JSX
function UserCard({ name, age }) {
  return <div>{name}, {age} лет</div>;
}

Ключевые особенности пропсов:

Только для чтения - компонент не должен изменять свои пропсы.
Могут быть любого типа - строки, числа, объекты, массивы, функции, даже другие React-элементы.
Передача функций - позволяет реализовать callback'и для обратной связи с родителем.
children - специальный пропс для вложенного содержимого.

Пропсы - основа композиции компонентов в React, позволяющая создавать гибкие и переиспользуемые интерфейсы.