Рендер нескольких компонентов в React: решение ошибки

Возвращение единственного родительского объекта

Любой React-компонент должен возвращать только один родительский элемент. Попытка вернуть несколько элементов, например, <h2> и <p>, приведёт к ошибке.

<h2>Заголовок второго уровня</h2>
<p>Это простой текст.</p>

Решение: обернуть элементы в один родительский элемент, например, <div>:

<div>
  <h2>Заголовок второго уровня</h2>
  <p>Это простой текст.</p>
</div>

Теперь компонент возвращает единственный <div>, содержащий дочерние элементы. Вместо <div> можно использовать другие элементы, такие как <span>, но <div> наиболее распространён.

Рендеринг нескольких компонентов

Аналогично, для рендеринга нескольких компонентов их нужно обернуть в один родительский элемент:

<div>
  <КомпонентБлок />
  <КомпонентБлок />
  <КомпонентБлок />
</div>

Это гарантирует корректное отображение компонентов.

Использование переменных и вычислений в JSX

В JSX переменные и JavaScript-выражения используются внутри фигурных скобок {}.

Пример:

const place = document.getElementById('some-element');

Вывод значения:

{place}

Вычисления:

{3 + 5}

Результат: 8.

Использование переменной:

const num = 20;

Вывод значения переменной:

{num}

JSX внутри фигурных скобок обрабатывается как обычный JavaScript, позволяя использовать переменные, вычисления и вызовы функций в разметке.

Любой React-компонент должен возвращать один родительский элемент. Используйте обертывающие элементы (например, <div>) для группировки нескольких элементов или компонентов. JavaScript-выражения внутри фигурных скобок позволяют динамически рендерить контент.