1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Без использования данных некоторые компоненты на практике могут быть бесполезными. Например, компонент может отрисовывать какой-то специфический текст, который может меняться. Создавать на каждый конкретный случай свой собственный компонент с нужным текстом - не самая хорошая идея. Это не говоря о том, что чаще всего такое просто невозможно, ведь текст может подставляться динамически.</p>
1
<p>Без использования данных некоторые компоненты на практике могут быть бесполезными. Например, компонент может отрисовывать какой-то специфический текст, который может меняться. Создавать на каждый конкретный случай свой собственный компонент с нужным текстом - не самая хорошая идея. Это не говоря о том, что чаще всего такое просто невозможно, ведь текст может подставляться динамически.</p>
2
<p>Передавать данные в компоненты можно, и делается это с помощью пропсов (props):</p>
2
<p>Передавать данные в компоненты можно, и делается это с помощью пропсов (props):</p>
3
-
<p><a>https://codepen.io/hexlet/pen/YxObvW</a></p>
3
+
<p><a>Попрактиковаться</a></p>
4
<p>Как видно, снаружи пропсы передаются как атрибуты в HTML, которые внутри компонента доступны из объекта props. Причём такая передача входных данных для вас уже должна быть не в новинку. Встроенные компоненты точно так же принимают на вход пропсы, такие как className и другие.</p>
4
<p>Как видно, снаружи пропсы передаются как атрибуты в HTML, которые внутри компонента доступны из объекта props. Причём такая передача входных данных для вас уже должна быть не в новинку. Встроенные компоненты точно так же принимают на вход пропсы, такие как className и другие.</p>
5
<p>Пропсы - очень простой механизм передачи данных в компоненты, который, как правило, не вызывает никаких сложностей. Главное, что нужно запомнить при работе с пропсами:<strong>их нельзя изменять</strong>. Во-первых, из-за принципа работы React это просто ни к чему не приведёт, во-вторых, для работы с изменяемым состоянием в React предусмотрен совершенно другой механизм, который будет рассмотрен позже.</p>
5
<p>Пропсы - очень простой механизм передачи данных в компоненты, который, как правило, не вызывает никаких сложностей. Главное, что нужно запомнить при работе с пропсами:<strong>их нельзя изменять</strong>. Во-первых, из-за принципа работы React это просто ни к чему не приведёт, во-вторых, для работы с изменяемым состоянием в React предусмотрен совершенно другой механизм, который будет рассмотрен позже.</p>
6
<h2>Оператор расширения</h2>
6
<h2>Оператор расширения</h2>
7
<p>Работая с пропсами, нередко приходится передавать множество параметров, либо эти параметры присутствуют в коде в виде объекта. В таком случае можно упростить передачу, используя оператор расширения (spread-оператор).</p>
7
<p>Работая с пропсами, нередко приходится передавать множество параметров, либо эти параметры присутствуют в коде в виде объекта. В таком случае можно упростить передачу, используя оператор расширения (spread-оператор).</p>
8
<p>Код выше эквивалентен следующему примеру:</p>
8
<p>Код выше эквивалентен следующему примеру:</p>
9
<h2>Пропсы по умолчанию</h2>
9
<h2>Пропсы по умолчанию</h2>
10
<p>Другая задача, с которой сталкиваются разработчики - установка значений по умолчанию для пропсов (для случаев, когда какие-то пропсы не переданы). Проще всего устанавливать их прямо внутри функции render, используя такой подход:</p>
10
<p>Другая задача, с которой сталкиваются разработчики - установка значений по умолчанию для пропсов (для случаев, когда какие-то пропсы не переданы). Проще всего устанавливать их прямо внутри функции render, используя такой подход:</p>
11
<p>Это сработает, но потенциально может привести к проблемам производительности (в первую очередь). Тема производительности будет рассмотрена в одном из последних уроков.</p>
11
<p>Это сработает, но потенциально может привести к проблемам производительности (в первую очередь). Тема производительности будет рассмотрена в одном из последних уроков.</p>
12
<p>В React предусмотрен способ устанавливать значения пропсов по умолчанию. Пример:</p>
12
<p>В React предусмотрен способ устанавливать значения пропсов по умолчанию. Пример:</p>
13
13