React.Fragment Flashcards
React.Fragment
React компонент обязан возвращать один родительский элемент. В нашем примере мы используем для этих целей div, т.к. нам необходимо повесить класс.
Однако довольно часто встречаются моменты когда нам не нужно вещать класс, но обернуть все равно приложение чем то нужно. div с пустым классом в такой ситуации использовать можно, но не рекомендуется по причине того, что div создаст лишний узел в DOM. Это конечно же не супер критично, но можно обойтись более элегантно.
Для этих целей в React есть специальный тег, даже два 😀, которые решают эту проблему <></> или <Fragment></Fragment>
// 1 variant
function Component1() {
return (
<>
<Todolist></Todolist>
<Todolist></Todolist>
<Todolist></Todolist>
</>
)
}
function Component2() {
return (
<Fragment>
<Todolist></Todolist>
<Todolist></Todolist>
<Todolist></Todolist>
</Fragment>
)
}
❓В чем разница между этими вариантами ?
Всегда используйте синтаксис с пустым тегом <></>, но если вам понадобится мапить массив и соответсвенно передавать туда key, тогда используйте <Fragment></Fragment>.
