Создание сложного элемента JSX
Последняя задача была простым примером JSX, но JSX также может представлять собой более сложный HTML. Одна важная вещь, которую нужно знать о вложенном JSX, состоит в том, что она должна возвращать один корневой элемент. Этот один родительский элемент будет обертывать все остальные уровни вложенных элементов. Но если корневых элементов больше одного, то возникнет ошибка. Вот пример:
Действительный JSX:
<div>
<p> Пункт 1 </p>
<p> Пункт второй </p>
<p> Пункт третий </p>
</div> <p> Пункт 1 </ p>
<p> Пункт второй </p>
<p> Пункт третий </p>Определите новую константу JSX которая отображает div который содержит следующие элементы в порядке: h1 , p и неупорядоченный список ul, содержащий три элемента li . Вы можете включать любой текст, который вы хотите в каждом элементе. Примечание. При рендеринге нескольких элементов, подобных этому, их можно скопировать в круглые скобки, но это не требуется строго. Также обратите внимание, что эта задача использует тег div для обертывания всех дочерних элементов в одном родительском элементе. Если вы здесь удалите div , JSX будет невалидный. Помните об этом, так как он будет применяться и при возврате элементов JSX в компонентах React.