Props
Props представляет коллекцию значений, которые ассоциированы с компонентом. Эти значения позволяют создавать динамические компоненты, которые не зависят от жестко закодированных статических данных.
Функциональный подход:
function Hello(props) {
return <div>
<p>Имя: {props.name}</p>
<p>Возраст: {props.age}</p>
</div>;
}
Параметр props, который передается в функцию компонента, инкапсулирует свойства объекта. В частности, свойство name и age.
При рендеринге мы можем создать набор компонентов Hello, но передать в них разные данные для name и age. И таким образом, получим набор однотипной
разметки html, наполненной разными данными.
Использование классов:
class Hello extends React.Component {
render() {
return <div>
<p>Имя: {this.props.name}</p>
<p>Возраст: {this.props.age}</p>
</div>;
}
}
Класс компонента также извне получает объект свойств, который доступен через this.props.
Использование стрелочных функций (arrow functions):
const Hello = (props) => {
const {name, age} = props;
return(<div>
<p>Имя: {name}</p>
<p>Возраст: {age}</p>
</div>);
}
Используем компонент Hello:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Hello(props) {
return <div>
<p>Имя: {props.name}</p>
<p>Возраст: {props.age}</p>
</div>;
}
ReactDOM.createRoot(
document.getElementById("app")
)
.render(
<Hello name="Tom" age="33" />
);
</script>
</body>
</html>
При рендеринге React передает значения атрибутов в виде единого объекта "props". То есть значение из атрибута
name="Tom" перейдет в свойство props.name.
В итоге будет создана следующая страница:
Значения по умолчанию
Мы можем определить для свойств значения по умолчанию на тот случай, если их значения не передаются извне.
Если мы применяем классы, то для установки значений применяется статическое свойство defaultProps:
class Hello extends React.Component {
render() {
return <div>
<p>Имя: {this.props.name}</p>
<p>Возраст: {this.props.age}</p>
</div>;
}
}
Hello.defaultProps = {name: "Tom", age: 22};
При функциональном определении компонента также применяется свойство defaultProps:
function Hello(props) {
return <div>
<p>Имя: {props.name}</p>
<p>Возраст: {props.age}</p>
</div>;
}
Hello.defaultProps = {name: "Tom", age: 22};
И в любом из этих случаев, если мы не определим какие-то свойства для компонента, то они будут брать значения из значений по умолчанию:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Hello(props) {
return <div>
<p>Имя: {props.name}</p>
<p>Возраст: {props.age}</p>
</div>;
}
Hello.defaultProps = {name: "Tom", age: 22};
ReactDOM.createRoot(
document.getElementById("app")
)
.render(
<Hello name="Bob" />
);
</script>
</body>
</html>
Обновление props
Сам this.props представляет неизменяемый объект, который предназначен только для чтения. Поэтому не следует его изменять, например:
class Hello extends React.Component {
render() {
this.props.name = "Tom";
return <h1>Привет, {this.props.name}</h1>;
}
}
Если же надо время то времени изменять какие-то внутренние данные компонента, то для хранения таких данных в React предназначен объект state, который будет рассмотрен в следующей статье.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи