Почему нельзя возвращать несколько элементов в React?
он может возвращать только один тег элемента в рендеринге.
В версии 16 мы можем отображать несколько элементов с помощью массива.
так почему же нельзя напрямую писать теги нескольких элементов в React?
render(){
return(
<div />
<div />
)
}
Я имею в виду, почему нельзя отображать несколько элементов, но не то, как отображать несколько элементов.
Ответ на ваш вопрос есть.
Ответы 3
React нуждается в родительском элементе для рендеринга чего-либо. Вы можете поместить их в массив или использовать инструмент, который они предоставили именно для этой цели, компонент fragment.
Фрагмент — это просто пустой узел, который не отображается в DOM, что позволяет вам возвращать несколько компонентов JSX рядом друг с другом:
render(){
return(
<>
<div />
<div />
</>
)
}
Если ваш линтер не любит это, вы можете вместо этого использовать React.Fragment:
render(){
return(
<React.Fragment>
<div />
<div />
</React.Fragment>
)
}
Короткий ответ на ваш вопрос: это то, как работает React и как устроен их движок рендеринга.
На данный момент несколько элементов, объединенных вместе, не будут интерпретироваться как массив.
Я думал, что это скорее «JavaScript работает не так» и мало общего с React.
И не забудьте оператор импорта: import React from 'react';
@MarvelMoe С React 17 в этом больше нет необходимости :)
Реализация React основана на построении древовидной структуры, которую он использует для согласования. Когда вы возвращаете несколько элементов из элементов React из метода рендеринга, предположение о том, что дерево будет иметь один корневой узел для компонента, больше не будет выполняться, что затрудняет обработку алгоритма согласования.
Таким образом, реакция дает вам ограничение на предоставление корневого узла. Если вы вернете массив элементов из версии 16 и выше, реакция создаст внутренний фиктивный узел в качестве родителя.
Начиная с версии 16.2, React предоставляет компонент React.Fragment, который обеспечивает более чистый синтаксис для возврата нескольких элементов.
render(){
return(
<React.Fragment>
<div />
<div />
</React.Fragment>
)
}
the assumtion that the tree will have one root node for the Component will not longer hold, hence making it difficult to process reconcilation algorithm --- Как React.Fragment решает эту проблему?
@AamirKhan React.Fragment дает вам фиктивный родительский узел, к которому множественные элементы можно рассматривать как дочерние.
Да, но как это работает под капотом? Поскольку фиктивный родитель не отображается в дереве DOM, я не понимаю, как React справляется с исходной проблемой, т. е. не имея одного корневого узла.
Можешь попробовать
render(){
return[
<div> Div 1</div>,
<div> Div 2</div>,
<div> Div 3</div>,
<div> Div 4</div>
]
}
Я имею в виду, почему нельзя отображать несколько элементов, но не как отображать несколько элементов. ---