尝试返回此代码时：
return <hr/><h1>E esse é um Class Component</h1>
我收到一个错误，但如果我更改为：
return <h1><hr/>E esse é um Class Component</h1>
有用。在错误中，它说相邻的 JSX 元素必须包含在一个封闭的标签中。你想要一个 JSX 片段，但我不太明白。有人可以解释一下吗？我开始学习 React，所以我有点新手。
React 必须知道返回元素是否有效的子元素的作用域。它还必须检查其 React 差异算法。所以这就是为什么你需要一个反应范围来返回元素。
这就像“返回（{项目：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 官方文档上的片段。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句