Хранение тегов в переменных и константах JSX

В переменных и константах можно хранить теги, выполняя затем их вставку в нужное место.

Смотрите пример:

function App() { const str = <p>text</p>; return <div> {str} </div>; }

В результате рендеринга получится следующий код:

<div> <p>text</p> </div>

Несколько тегов в константах

Учтите, что несколько тегов, хранящихся в константе, обязательно нужно обернуть в какой-то общий тег. То есть вот так не будет работать:

function App() { const str = <p>text1</p><p>text2</p>; return <main> {str} </main>; }

А вот так будет, так как абзацы обернуты в один тег div:

function App() { const str = <div><p>text1</p><p>text2</p></div>; return <main> {str} </main>; }

Можно также использовать пустые теги:

function App() { const str = <><p>text1</p><p>text2</p></>; return <main> {str} </main>; }

Теги не в одну строку

Теги, записываемые в константы, не обязательно писать на одной строке. Можно сделать и так:

function App() { const str = <p> text </p>; return <div> {str} </div>; }

А можно и вот так:

function App() { const str = ( <p> text </p> ); return <div> {str} </div>; }

Возврат через return

Константы с тегами можно возвращать через return:

function App() { const str = <main> text </main>; return str; }

Практические задачи

Дан следующий код:

function App() { const li1 = <li>text1</li>; const li2 = <li>text2</li>; const li3 = <li>text3</li>; }

Сделайте так, чтобы результатом рендеринга было следующее:

<ul> <li>text1</li> <li>text2</li> <li>text3</li> </ul>

Автор следующего кода хотел записать в константу несколько тегов li и вставить их в ul:

function App() { const items = <li>text1</li><li>text2</li><li>text3</li>; return <ul> {items} </ul> }

Код, однако, не работает. Исправьте ошибку автора кода.