React Реквизит
Реквизит - это аргументы, передаваемые в компоненты React.
Реквизит передаются компонентам через HTML атрибуты.
React Props
React реквизиты подобны аргументам функций в JavaScript и атрибутам в HTML.
Для отправки реквизитов в компонент используйте тот же синтаксис, что и атрибуты HTML:
Пример
Добавьте атрибут "brand" к элементу Car:
const myelement = <Car brand="Ford" />;Компонент получает аргумент в виде объекта props:
Пример
Используйте атрибут "brand" в компоненте:
class Car extends React.Component {
render() {
return <h2>I am a {this.props.brand}!</h1>;
}
}
Передать данные
Реквизит - это также способ передачи данных от одного компонента к другому в качестве параметров.
Пример
Отправьте свойство "brand" из компонента гаража в компонент автомобиля:
class Car extends React.Component {
render() {
return <h2>I am a {this.props.brand}!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Если у вас есть переменная для отправки, а не строка, как в приведенном выше примере, вы просто помещаете имя переменной в фигурные скобки:
Пример
Создайте переменную с именем "carname" и послать его на компонент Car:
class Car extends React.Component {
render() {
return <h2>I am a {this.props.brand}!</h2>;
}
}
class Garage extends React.Component {
render() {
const carname = "Ford";
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand={carname} />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Или если это был объект:
Пример
Создать объект по имени "carinfo" и послать его на компонент автомобиль:
class Car extends React.Component {
render() {
return <h2>I am a {this.props.brand.model}!</h2>;
}
}
class Garage extends React.Component {
render() {
const carinfo = {name: "Ford", model: "Mustang"};
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand={carinfo} />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Реквизит в конструкторе
Если ваш компонент имеет функцию конструктора, то реквизиты всегда должны передаваться конструктору,
а также React.Component через метод super().
Пример
class Car extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>I am a Car!</h2>;
}
}
ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));
Примечание: React реквизит доступен только для чтения! Вы получите ошибку, если попытаетесь изменить их значение.
