Question

尝试返回此代码时：

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

我收到一个错误，但是如果我更改为：

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

有效。错误中指出相邻的JSX元素必须包装在一个封闭的标签中。您是否想要JSX片段，但我不太了解。有人可以解释一下吗？我开始学习React，所以我有点新手。

Answer 1

您的return语句应该返回一个封闭标签或一个片段。

更改此行

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

到

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

Answer 2

React必须知道其子级范围内返回的元素是否有效。它还必须检查其React diffing算法。因此，这就是为什么需要有一个react作用域来返回元素的原因。

这就像“返回（{item：1}）;” Javascript函数的返回值。因此，React希望您发送其顶级有效子级。

但是您想向React发送类似“ return（{item：1}，{item：2}）;”之类的东西。

如您所见；

<div>
   <ReturnElement />
</div>

div元素是Return元素的范围。如果您想为DOM树返回清晰的范围，可以使用React Fragments功能。

<>
  <ReturnChildElement />
</>

或

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

注意：如果要使用第一种语法，则babel的最低版本必须为“ v7.0.0-beta.31”才能在JSX语法中使用。

您还可以在React的官方文档中查看片段。