Реагировать на реквизиты
Реквизиты — это аргументы, передаваемые компонентам React.
Реквизиты передаются компонентам через атрибуты HTML.
props
обозначает свойства.
Реагировать на реквизиты
Реквизиты React похожи на аргументы функций в JavaScript и атрибуты в HTML.
Чтобы отправить свойства в компонент, используйте тот же синтаксис, что и атрибуты HTML:
Пример
Добавьте атрибут «бренд» к элементу «Автомобиль»:
const myelement = <Car brand="Ford" />;
Компонент получает аргумент как props
объект:
Пример
Используйте атрибут бренда в компоненте:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Передать данные
Реквизиты также позволяют передавать данные из одного компонента в другой в виде параметров.
Пример
Отправьте свойство brand из компонента Garage в компонент Car:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Если у вас есть переменная для отправки, а не строка, как в примере выше, вы просто заключаете имя переменной в фигурные скобки:
Пример
Создайте переменную с именем 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 } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Или, если это был объект:
Пример
Создайте объект с именем 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 } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Примечание. Реквизиты React доступны только для чтения! Вы получите сообщение об ошибке, если попытаетесь изменить их значение.