Пропсы (props) — это аргументы, передаваемые компонентам React.
Пропсы передаются компонентам через атрибуты HTML.
Пропсы компонентов React
Компоненты React принимают пропсы подобно аргументам функций в JavaScript и атрибутам элементов в HTML.
Передача пропсов осуществляется таким же синтаксисом, как у атрибутов HTML.
Пример
Добавляем атрибут brand компоненту Car:
createRoot(document.getElementById('root')).render(
<Car brand="Ford" />
);
Компонент получает аргумент в виде объекта props.
Пример
Используем значение атрибута brand внутри компонента Car:
function Car(props) {
return (
<h2>Я автомобиль марки {props.brand}!</h2>
);
}
Название объекта — props, но вы можете назвать его любым другим именем.
Пример
Можно заменить название props на любое другое, например, myobj:
function Car(myobj) {
return (
<h2>Я автомобиль марки {myobj.brand}!</h2>
);
}
Передача нескольких пропсов
Можно передавать столько пропсов, сколько потребуется.
Каждый атрибут становится отдельным свойством объекта props в компоненте.
Пример
Передаем сразу несколько свойств компоненту Car:
createRoot(document.getElementById('root')).render(
<Car brand="Ford" model="Mustang" color="red" />
);
Все значения будут получены компонентом в объекте props.
Пример
Используем полученные свойства внутри компонента Car:
function Car(props) {
return (
<h2>Я красный Ford Mustang!</h2>
);
}
Различные типы данных
Пропсы могут быть любого типа данных: переменные, числа, строки, объекты, массивы и др.
Строки можно указывать прямо в кавычках, числа, объекты и переменные необходимо заключать в фигурные скобки.
Пример
Число должно быть передано в фигурных скобках, иначе оно интерпретируется как строка:
createRoot(document.getElementById('root')).render(
<Car year={1969} />
);
Пример
Переменная также передается в фигурных скобках:
let x = "Ford";
createRoot(document.getElementById('root')).render(
<Car brand={x} />
);
Пример
Объекты и массивы тоже требуют фигурных скобок:
let x = [1964, 1965, 1966]; // Массив
let y = {name: "Ford", model: "Mustang"}; // Объект
createRoot(document.getElementById('root')).render(
<Car years={x} carinfo={y} />
);
Объекты как пропсы
Компонент обрабатывает пропсы-объекты как обычные объекты, позволяя обращаться к свойствам через точечную нотацию.
Пример
Доступ к свойствам объекта через точку:
function Car(props) {
return (
<>
<h2>Мой автомобиль {props.carinfo.name} {props.carinfo.model}!</h2>
<p>Он {props.carinfo.color} и выпущен в {props.carinfo.year} году.</p>
</>
);
}
const carInfo = {
name: "Ford",
model: "Mustang",
color: "красный",
year: 1969
};
createRoot(document.getElementById('root')).render(
<Car carinfo={carInfo} />
);
Массивы как пропсы
Массивы позволяют получать доступ к данным через индексы.
Пример
Обращаемся к элементам массива по индексам:
function Car(props) {
return (
<h2>Моя автомобиль — {props.carinfo[0]} {props.carinfo[1]}!</h2>
);
}
const carInfo = ["Ford", "Mustang"];
createRoot(document.getElementById('root')).render(
<Car carinfo={carInfo} />
);
Передача пропсов между компонентами
Атрибуты используются для передачи данных между компонентами, аналогично параметрам функций.
Пример
Передаем атрибут brand от компонента Garage к компоненту Car:
function Car(props) {
return (
<h2>Я автомобиль марки {props.brand}!</h2>
);
}
function Garage() {
return (
<>
<h1>Кто живет в моем гараже?</h1>
<Car brand="Ford" />
</>
);
}
createRoot(document.getElementById('root')).render(
<Garage />
);
