Без использования данных некоторые компоненты на практике могут быть бесполезными. Например, компонент может отрисовывать какой-то специфический текст, который может меняться. Создавать на каждый конкретный случай свой собственный компонент с нужным текстом — не самая хорошая идея. Это не говоря о том, что чаще всего такое просто невозможно, ведь текст может подставляться динамически.
Передавать данные в компоненты можно, и делается это с помощью пропсов (props):
See the Pen js_react_props by Hexlet (@hexlet) on CodePen.
Как видно, снаружи пропсы передаются как атрибуты в HTML, которые внутри компонента доступны из объекта props
. Причём такая передача входных данных для вас уже должна быть не в новинку. Встроенные компоненты точно так же принимают на вход пропсы, такие как className
и другие.
const vdom = (
<div className="row">
<div className="col-6">
<HelloMessage name="Kate" />
</div>
<div className="col-6">
<HelloMessage name="Mark" />
</div>
</div>
);
Пропсы — очень простой механизм передачи данных в компоненты, который, как правило, не вызывает никаких сложностей. Главное, что нужно запомнить при работе с пропсами: их нельзя изменять. Во-первых, из-за принципа работы React это просто ни к чему не приведёт, во-вторых, для работы с изменяемым состоянием в React предусмотрен совершенно другой механизм, который будет рассмотрен позже.
Оператор расширения
Работая с пропсами, нередко приходится передавать множество параметров, либо эти параметры присутствуют в коде в виде объекта. В таком случае можно упростить передачу, используя оператор расширения (spread-оператор).
const params = {
className: 'row',
title: 'name',
};
const name = 'Eva';
const vdom = <div id="container" {...params}>
Hello, {name}
</div>;
Код выше эквивалентен следующему примеру:
const name = 'Eva';
const vdom = <div id="container" className="row" title="name">
Hello, {name}
</div>;
Пропсы по умолчанию
Другая задача, с которой сталкиваются разработчики — установка значений по умолчанию для пропсов (для случаев, когда какие-то пропсы не переданы). Проще всего устанавливать их прямо внутри функции render
, используя такой подход:
const title = this.props.title || 'hi!';
Это сработает, но потенциально может привести к проблемам производительности (в первую очередь). Тема производительности будет рассмотрена в одном из последних уроков.
В React предусмотрен способ устанавливать значения пропсов по умолчанию. Пример:
class Header extends React.Component {
render() {
const { text } = this.props;
return (
<h1>{text}</h1>
);
}
}
Header.defaultProps = {
text: 'Hello, world!',
};
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.