1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В работе с коллекциями элементов в JSX по большей части нет ничего особенного. С другой стороны, задача обработки списков элементов настолько частая, что будет не лишним её обсудить отдельно.</p>
1
<p>В работе с коллекциями элементов в JSX по большей части нет ничего особенного. С другой стороны, задача обработки списков элементов настолько частая, что будет не лишним её обсудить отдельно.</p>
2
-
<p><a>https://codepen.io/hexlet/pen/YxJaKG/</a></p>
2
+
<p><a>Попрактиковаться</a></p>
3
<p>Выше приведён типичный код, в котором коллекция генерируется прямо в том месте, куда и подставляется. Здесь можно снова увидеть, что внутрь JSX через {} вложено выражение, внутри которого опять появляется JSX-код. Как правило, рекурсия на этом заканчивается. Если нужна более сложная обработка, то имеет смысл вынести генерацию коллекции в метод компонента и вызывать его внутри render. Например, ниже выделена функция renderList(), которая формирует список для отрисовки:</p>
3
<p>Выше приведён типичный код, в котором коллекция генерируется прямо в том месте, куда и подставляется. Здесь можно снова увидеть, что внутрь JSX через {} вложено выражение, внутри которого опять появляется JSX-код. Как правило, рекурсия на этом заканчивается. Если нужна более сложная обработка, то имеет смысл вынести генерацию коллекции в метод компонента и вызывать его внутри render. Например, ниже выделена функция renderList(), которая формирует список для отрисовки:</p>
4
<h2>Проп key</h2>
4
<h2>Проп key</h2>
5
<p>Для повышения эффективности, React настоятельно рекомендует идентифицировать каждую генерируемую строку коллекции. Связано это с механизмом, который производит изменения в DOM. Подробнее об этом будет рассказано позже, а сейчас нужно просто запомнить, что, генерируя коллекцию элементов в JSX, нужно обязательно проставлять уникальный проп key, который не меняется при повторной генерации коллекции. key не обязан быть уникальным в глобальном контексте, достаточно уникальности среди соседних элементов.</p>
5
<p>Для повышения эффективности, React настоятельно рекомендует идентифицировать каждую генерируемую строку коллекции. Связано это с механизмом, который производит изменения в DOM. Подробнее об этом будет рассказано позже, а сейчас нужно просто запомнить, что, генерируя коллекцию элементов в JSX, нужно обязательно проставлять уникальный проп key, который не меняется при повторной генерации коллекции. key не обязан быть уникальным в глобальном контексте, достаточно уникальности среди соседних элементов.</p>
6
<p>Чаще всего с этой задачей не возникает проблем, так как у любой сущности, с которой мы работаем, есть свой идентификатор (например, primary key из базы данных).</p>
6
<p>Чаще всего с этой задачей не возникает проблем, так как у любой сущности, с которой мы работаем, есть свой идентификатор (например, primary key из базы данных).</p>
7
<p>Как видите, ничего сложного в этом нет. Более того, если по какой-то причине вы забудете указать key в коллекции, то React начнёт выбрасывать предупреждения об этом прямо в консоли браузера. Поэтому пытаться запомнить все ситуации, в которых их надо ставить, не обязательно. В процессе работы вы и так об этом узнаете и сможете легко поправить.</p>
7
<p>Как видите, ничего сложного в этом нет. Более того, если по какой-то причине вы забудете указать key в коллекции, то React начнёт выбрасывать предупреждения об этом прямо в консоли браузера. Поэтому пытаться запомнить все ситуации, в которых их надо ставить, не обязательно. В процессе работы вы и так об этом узнаете и сможете легко поправить.</p>
8
<p>Кстати, key не обрабатывается как обычный проп и его нельзя получить внутри компонента как this.props.key. Если вам нужны данные, которые были переданы в key внутри компонента, то просто передайте их отдельным пропом (например, id):</p>
8
<p>Кстати, key не обрабатывается как обычный проп и его нельзя получить внутри компонента как this.props.key. Если вам нужны данные, которые были переданы в key внутри компонента, то просто передайте их отдельным пропом (например, id):</p>
9
<p>Проп key ставится только на генерируемые элементы коллекции. На элементы, которые сразу добавлены в шаблон, key указывать не нужно:</p>
9
<p>Проп key ставится только на генерируемые элементы коллекции. На элементы, которые сразу добавлены в шаблон, key указывать не нужно:</p>
10
<h2>Корневой элемент компонента</h2>
10
<h2>Корневой элемент компонента</h2>
11
<p>Распространённой задачей является возврат нескольких элементов без общего родителя из одного компонента в другой. Допустим, одна статья содержит несколько подзаголовков, тогда её код будет выглядеть примерно так:</p>
11
<p>Распространённой задачей является возврат нескольких элементов без общего родителя из одного компонента в другой. Допустим, одна статья содержит несколько подзаголовков, тогда её код будет выглядеть примерно так:</p>
12
<p><Section /> должен объединить и вернуть несколько элементов. Если использовать для этих целей div, как родительский элемент, то он попадёт в итоговый HTML:</p>
12
<p><Section /> должен объединить и вернуть несколько элементов. Если использовать для этих целей div, как родительский элемент, то он попадёт в итоговый HTML:</p>
13
<p>Итоговый HTML из компонента <Article />:</p>
13
<p>Итоговый HTML из компонента <Article />:</p>
14
<p>Для решения этой задачи в React ввели специальный компонент <React.Fragment>, которым можно оборачивать любую коллекцию элементов. Его особенность в том, что этот элемент никак не отражается в реальном DOM, а существует только на уровне JSX и может принимать единственный атрибут key.</p>
14
<p>Для решения этой задачи в React ввели специальный компонент <React.Fragment>, которым можно оборачивать любую коллекцию элементов. Его особенность в том, что этот элемент никак не отражается в реальном DOM, а существует только на уровне JSX и может принимать единственный атрибут key.</p>
15
<p>Тогда результатом вывода <Article /> будет:</p>
15
<p>Тогда результатом вывода <Article /> будет:</p>
16
<p>У этого элемента есть короткая версия <> записи, но она не поддерживает ключи или атрибуты:</p>
16
<p>У этого элемента есть короткая версия <> записи, но она не поддерживает ключи или атрибуты:</p>
17
<p>Выглядит непривычно, но работает отлично!</p>
17
<p>Выглядит непривычно, но работает отлично!</p>
18
<p>В случае когда элементы не нужно генерировать, можно вообще обойтись без React.Fragment, обернув все элементы в массив:</p>
18
<p>В случае когда элементы не нужно генерировать, можно вообще обойтись без React.Fragment, обернув все элементы в массив:</p>
19
19