Особенности возврата нескольких тегов в JSX
Через 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>
</>
);
}
Автор следующего кода хочет вернуть сразу
два тега 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>;
}
Код, однако, не работает. Исправьте ошибку автора кода. Предложите два способа решения проблемы.