Почему я не могу использоватьтег вне другого тега в ReactJS?

Question

При попытке вернуть этот код:

return <hr/><h1>E esse é um Class Component</h1>

Я получаю сообщение об ошибке, но если я изменяю на:

return <h1><hr/>E esse é um Class Component</h1>

Это работает.В сообщении об ошибке говорится, что смежные элементы JSX должны быть заключены в тег.Вы хотели фрагмент JSX, но я не совсем понял.Может кто-нибудь объяснить, пожалуйста?Я начинаю изучать React, так что я новичок.

Answer 1

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

Это как "return ({item: 1});"для функций JavaScript возвращаемое значение.Поэтому React хочет, чтобы вы отправили его действительному дочернему элементу верхнего уровня.

Но вы хотели отправить React что-то вроде "return ({item: 1}, {item: 2});".

Как видите,

<div>
   <ReturnElement />
</div>

Элемент div является областью действия для элемента Return.Если вы хотите вернуть чистую область видимости для вашего дерева DOM, вы можете использовать функцию «Реактивные фрагменты».

<>
  <ReturnChildElement />
</>

или

<React.Fragment>
  <ReturnChildElement />
</React.Fragment>

Примечание: Если вы хотите использоватьпервый синтаксис, минимальная версия вашего babel должна быть "v7.0.0-beta.31" для использования в вашем синтаксисе JSX.

Также вы можете проверить фрагменты на Официальных документах React.

https://reactjs.org/docs/fragments.html

Answer 2

В вашем операторе возврата должен быть либо один тег или фрагмент, содержащий его.

Измените эту строку

return
  <hr/>
    <h1>E esse é um Class Component</h1>

на

return
  <>
    <hr/>
    <h1>E esse é um Class Component</h1>
  </>