React Props (Реквізит)
Props (реквізити) — це аргументи, що передаються в компоненти React.
Реквізити передаються компонентам через атрибути HTML.
props означає властивості.
React Props
React Props схожі на аргументи функції в JavaScript та атрибути в HTML.
Щоб надіслати атрибути в компонент, використовуйте той самий синтаксис, що й атрибути HTML:
Приклад
Додайте атрибут "brand" до елементу Car:
const myElement = <Car brand="Ford" />;Компонент отримує аргумент як об’єкт props:
Приклад
Використовуйте атрибут бренду в компоненті:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Передайте дані
Реквізити — це також спосіб передачі даних від одного компонента до іншого у вигляді параметрів.
Приклад
Надіслати "brand" майно від компонента Garage до компонента Car:
function Car(props) {
return <h2>Я є { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Хто живе в моєму гаражі?</h1>
<Car brand="Ford" />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Якщо у вас є змінна для надсилання, а не рядок, як у прикладі вище, ви просто помістіть назву змінної у фігурні дужки:
Приклад
Створіть змінну з назвою carName і надішліть її до компонента Car:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Або якби це був об’єкт:
Приклад
Створіть об’єкт під назвою carInfo та надішліть його до компонента Car:
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Примітка: React Props доступні лише для читання! Ви отримаєте помилку, якщо спробуєте змінити їх значення.
