3 added
3 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>UI-элементы имеют иерархическую структуру. Например, компонент<em>card</em>в Bootstrap:</p>
1
<p>UI-элементы имеют иерархическую структуру. Например, компонент<em>card</em>в Bootstrap:</p>
2
<p>Блок карточки может содержать внутри себя картинку и тело. Тело, в свою очередь, может состоять из заголовка и текста, а текст может быть чем угодно. То же самое применимо как к самым простым элементам самого HTML, например, тегу <div>, так и к остальным компонентам Bootstrap, таким как модальные окна и навигация.</p>
2
<p>Блок карточки может содержать внутри себя картинку и тело. Тело, в свою очередь, может состоять из заголовка и текста, а текст может быть чем угодно. То же самое применимо как к самым простым элементам самого HTML, например, тегу <div>, так и к остальным компонентам Bootstrap, таким как модальные окна и навигация.</p>
3
<p>HTML соответствует природе UI и естественным образом позволяет создавать композиции элементов за счёт вкладывания тегов друг в друга. Точно так же работает и JSX. Пока эта возможность использовалась в курсе только для встроенных компонентов. Теперь пора научиться повторять подобное поведение в самописных компонентах. В качестве примера взят компонент <Alert /> из Bootstrap.</p>
3
<p>HTML соответствует природе UI и естественным образом позволяет создавать композиции элементов за счёт вкладывания тегов друг в друга. Точно так же работает и JSX. Пока эта возможность использовалась в курсе только для встроенных компонентов. Теперь пора научиться повторять подобное поведение в самописных компонентах. В качестве примера взят компонент <Alert /> из Bootstrap.</p>
4
-
<p><a>https://codepen.io/hexlet/pen/YxgWVm</a></p>
4
+
<p><a>Попрактиковаться</a></p>
5
<p>В примере выше обязательной частью является только основной<em>div</em>. Содержимое зависит от конкретной ситуации. Подставляется оно с помощью свойства<em>children</em>.</p>
5
<p>В примере выше обязательной частью является только основной<em>div</em>. Содержимое зависит от конкретной ситуации. Подставляется оно с помощью свойства<em>children</em>.</p>
6
-
<p><a>https://codepen.io/hexlet/pen/GveqMp</a></p>
6
+
<p><a>Попрактиковаться</a></p>
7
<p>Обратите внимание на то, что компонент стал использоваться как парный тег в JSX:</p>
7
<p>Обратите внимание на то, что компонент стал использоваться как парный тег в JSX:</p>
8
<p>Все, что находится между открывающим и закрывающим тегом, попадает внутрь пропса<em>children</em>.</p>
8
<p>Все, что находится между открывающим и закрывающим тегом, попадает внутрь пропса<em>children</em>.</p>
9
<p>Но будьте бдительны: тип данных свойства<em>children</em>зависит от содержимого. В простейшем случае, когда тег используется как одиночный <div />, это свойство будет равно undefined:</p>
9
<p>Но будьте бдительны: тип данных свойства<em>children</em>зависит от содержимого. В простейшем случае, когда тег используется как одиночный <div />, это свойство будет равно undefined:</p>
10
<p>Если этим содержимым является строка, то именно она окажется внутри<em>children</em>. Правда, после некоторой обработки. JSX удаляет пробельные символы с начала и конца строки, включая пустые строки. Следующие примеры будут отображены одинаково:</p>
10
<p>Если этим содержимым является строка, то именно она окажется внутри<em>children</em>. Правда, после некоторой обработки. JSX удаляет пробельные символы с начала и конца строки, включая пустые строки. Следующие примеры будут отображены одинаково:</p>
11
<p>Любой одиночный дочерний компонент также будет представлен сам собой в<em>children</em>:</p>
11
<p>Любой одиночный дочерний компонент также будет представлен сам собой в<em>children</em>:</p>
12
<p>Во всех остальных случаях children будет содержать массив:</p>
12
<p>Во всех остальных случаях children будет содержать массив:</p>
13
<p>Если внимательно посмотреть на документацию React, то можно увидеть следующее определение<em>children</em>: "children are an opaque data structure" (свойство children - непрозрачная структура данных). Другими словами, нельзя однозначно полагаться на тип этого пропса, так как снаружи можно передать всё что угодно.</p>
13
<p>Если внимательно посмотреть на документацию React, то можно увидеть следующее определение<em>children</em>: "children are an opaque data structure" (свойство children - непрозрачная структура данных). Другими словами, нельзя однозначно полагаться на тип этого пропса, так как снаружи можно передать всё что угодно.</p>
14
<p>Подобное поведение может приводить к трудно находимым ошибкам. Например, проверка this.props.children.length - это не всегда количество детей. Если children это одиночный элемент, например строка, то свойство length вернет длину этой строки.</p>
14
<p>Подобное поведение может приводить к трудно находимым ошибкам. Например, проверка this.props.children.length - это не всегда количество детей. Если children это одиночный элемент, например строка, то свойство length вернет длину этой строки.</p>
15
<p>Именно поэтому React предоставляет набор функций, предназначенных для манипулирования пропсом children. Все они доступны в React.Children. Эти функции знают про особенности работы children, сами проверяют тип и делают нужные проверки в зависимости от типа данных.</p>
15
<p>Именно поэтому React предоставляет набор функций, предназначенных для манипулирования пропсом children. Все они доступны в React.Children. Эти функции знают про особенности работы children, сами проверяют тип и делают нужные проверки в зависимости от типа данных.</p>
16
<p><strong>React.Children.map()</strong></p>
16
<p><strong>React.Children.map()</strong></p>
17
-
<p><a>https://codepen.io/hexlet/pen/ayMZrr</a></p>
17
+
<p><a>Попрактиковаться</a></p>
18
<p>Из урока про обработку коллекций вы можете вспомнить, что при работе со списком каждому элементу нужно установить проп key. Если этого не сделать в случае с React.Children.map, React не выбросит предупреждение. Так сделано намеренно, поскольку у потомков обычно нет уникальных идентификаторов.</p>
18
<p>Из урока про обработку коллекций вы можете вспомнить, что при работе со списком каждому элементу нужно установить проп key. Если этого не сделать в случае с React.Children.map, React не выбросит предупреждение. Так сделано намеренно, поскольку у потомков обычно нет уникальных идентификаторов.</p>
19
<p><strong>React.Children.count()</strong></p>
19
<p><strong>React.Children.count()</strong></p>
20
<p>Чтобы получить количество детей, нужно использовать метод React.Children.count(). В него передается children. Узлы, которые не являются DOM-элементами, будут проигнорированы:</p>
20
<p>Чтобы получить количество детей, нужно использовать метод React.Children.count(). В него передается children. Узлы, которые не являются DOM-элементами, будут проигнорированы:</p>
21
<p>Кроме перечисленного выше, бывает необходимо обработать дочерние элементы перед выводом, изменив часть в пропсе. Конечно же, напрямую этого сделать нельзя, ведь пропсы неизменяемы. Такого поведения можно добиться, клонируя элементы функцией React.cloneElement().</p>
21
<p>Кроме перечисленного выше, бывает необходимо обработать дочерние элементы перед выводом, изменив часть в пропсе. Конечно же, напрямую этого сделать нельзя, ведь пропсы неизменяемы. Такого поведения можно добиться, клонируя элементы функцией React.cloneElement().</p>
22
<h2>Композиция компонентов</h2>
22
<h2>Композиция компонентов</h2>
23
<p>Иерархия компонентов во многом закладывает структуру приложения. То, как вы распределите приложение на компоненты, определит кодовую базу вашего проекта.</p>
23
<p>Иерархия компонентов во многом закладывает структуру приложения. То, как вы распределите приложение на компоненты, определит кодовую базу вашего проекта.</p>
24
<p>Есть несколько советов как разбивать приложение на компоненты:</p>
24
<p>Есть несколько советов как разбивать приложение на компоненты:</p>
25
<ul><li>выделите части интерфейса в приложении, которые имеют осмысленный функционал. Например: навигационная панель, боковое меню, окно чата и т.д. Каждую такую часть приложения можно выделить в отдельный компонент. Такое разбиение интерфейса на составляющие части заложит основу компонентной базы</li>
25
<ul><li>выделите части интерфейса в приложении, которые имеют осмысленный функционал. Например: навигационная панель, боковое меню, окно чата и т.д. Каждую такую часть приложения можно выделить в отдельный компонент. Такое разбиение интерфейса на составляющие части заложит основу компонентной базы</li>
26
<li>если какие-то элементы повторяются, то их тоже лучше выделить в отдельный компонент для переиспользования. Например, это могут быть Button и InputField</li>
26
<li>если какие-то элементы повторяются, то их тоже лучше выделить в отдельный компонент для переиспользования. Например, это могут быть Button и InputField</li>
27
<li>рассматривайте компоненты как чистые функции. Пропсы, как и параметры в чистых функциях, не изменяются в компонентах, в React это важное правило</li>
27
<li>рассматривайте компоненты как чистые функции. Пропсы, как и параметры в чистых функциях, не изменяются в компонентах, в React это важное правило</li>
28
</ul>
28
</ul>