Правила возврата функцией тегов JSX

В предыдущем уроке у вас получился следующий код:

function App() { return <div> text </div>; }

Давайте посмотрим, какие особенности имеет возврат тегов из функции при работе с JSX.

Вложенность тегов

Внутри тега, который возвращается через return, может быть сколько угодно вложенных тегов:

function App() { return <div> <p>text1</p> <p>text2</p> </div>; }

Снос тега вниз

Открывающий тег обязательно должен быть написан на одной строке с командой return. Например, следующий код работать не будет:

function App() { return <div> <p>text1</p> <p>text2</p> </div>; }

Для того, чтобы такой снос тега вниз заработал, наш тег необходимо взять в круглые скобки:

function App() { return ( <div> <p>text1</p> <p>text2</p> </div> ); }

Возврат нескольких тегов

Через return нельзя возвращать сразу несколько тегов. То есть следующий код работать не будет:

function App() { return ( <div> <p>text1</p> <p>text2</p> </div> <div> <p>text3</p> <p>text4</p> </div> ); }

Чтобы желаемое заработало, нам придется взять наши теги в какой-нибудь общий тег, например, вот так:

function App() { return ( <div> <div> <p>text1</p> <p>text2</p> </div> <div> <p>text3</p> <p>text4</p> </div> </div> ); }

Такой прием сработает, однако, он не без недостатков: в результате рендеринга мы получим дополнительный див, который мы в общем не хотели и ввели исключительно для корректности работы React. Этот див, к примеру, может сломать нам часть верстки.

Для избежания таких проблем в React введен специальный пустой тег <></>, который группирует теги, но в готовую верстку не попадает. Давайте воспользуемся этим тегом:

function App() { return ( <> <div> <p>text1</p> <p>text2</p> </div> <div> <p>text3</p> <p>text4</p> </div> </> ); }

Возврат незакрытого тега

В качестве результата можно возвращать тег, который не нужно закрывать, например, инпут. Как вы уже знаете, по правилам React в этом случае вместо тега <input> нужно писать тег <input />:

function App() { return <input />; }

Возврат пустого тега

Пусть мы хотим вернуть пустой тег:

function App() { return <div></div>; }

В этом случае код можно сократить вот так:

function App() { return <div />; }

При этом в получившемся HTML коде React автоматические преобразует сокращенную форму в нормальную.

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

В следующем коде автор кода хочет вернуть тег ul:

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

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

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

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

Код, однако, не работает. Исправьте ошибку автора кода. Предложите два способа решения проблемы.

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

function App() { return <input>; }

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

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

function App() { return <input><input><input>; }

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