🧱 Суть
В JSX оператор spread (...) позволяет передавать объект с пропсами целиком.
Вместо:
<Component prop1={value1} prop2={value2} />можно написать:
const props = {
prop1: value1,
prop2: value2
};
<Component {...props} />Это равнозначная передача пропсов.
📦 Проблема
1. Не всегда известен набор пропсов заранее
Например:
const extraProps = {
to: '/profile',
onClick: handleClick
};Передавать каждый проп вручную неудобно.
2. Нужно передавать проп только при наличии значения
Например:
<Item
to={undefined}
/>Иногда лишние пропсы не нужны или могут вызвать предупреждения.
✅ Решение
Использовать условный spread:
<Item
{...(to ? { to } : {})}
{...(onClick ? { onClick } : {})}
/>Логика:
есть значение → создать объект → передать проп
нет значения → передать пустой объект💻 Код
Обычный spread:
const extraProps = {
title: 'Hello',
disabled: true
};
<Button {...extraProps} />Результат:
<Button
title="Hello"
disabled={true}
/>Условная передача пропса:
<Link
{...(to ? { to } : {})}
/>Если:
to = '/profile'получится:
<Link to="/profile" />Если:
to = undefinedполучится:
<Link />🎯 Вывод
spreadпозволяет передавать объект пропсов целиком{...props}= передача всех свойств объекта как пропсов- условный spread позволяет добавлять пропсы только при необходимости
- часто используется в универсальных React-компонентах