Javascript 在react中将``和``作为相邻JSX元素的封闭元素是否正常？我可以改用“”和“”吗？

我最近尝试运行以下代码

const App = () => {
  return (
    <>
      <ContactCard />
      <ContactCard />
      <ContactCard />
    </>
  );
};

然而，我遇到了以下错误

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

---

我通过将元素包装在和中解决了问题，但这正常吗？令人惊讶的是，我在呈现的HTML中找不到相应的空括号。使用和作为封闭的JSX元素不是更有意义吗？

您遇到了React.Fragments的需求

有时有必要添加JSX元素列表，就像在返回组件时必须添加到DOM中一样。问题是所有组件都必须返回一个JSX元素，就像在单个JSX元素中一样。因此，无法从组件返回未包装元素的列表

为了从组件返回JSX元素列表，您需要将它们封装在所谓的片段中

片段是一个JSX组件，它使您的组件能够返回多个元素，而无需使用DOM中出现的元素（如div）对它们进行包装。这就是为什么您在HTML中找不到它们呈现的原因

是的缩写

---

这正是它们不插入dom的目的

---

这对于html表来说非常方便，例如，在tr和td之间不能插入div，这是完全正常的。区别在于，将不会在HTML中呈现任何元素，而会呈现额外的div，并可能会破坏css或其他内容。

是的，这些是正常的：因为它们是的缩写。 这些片段就像div一样充当包装JSX元素，但是除非确实需要，否则这些片段不会呈现任何无用的div

---

查看提供的链接以了解更多详细信息

是，该概念在React中称为片段，使用起来非常方便。请检查此项以了解有趣的详细信息……可能您的意思是在添加之前出现了该错误。错误消息告诉您这是一个JSX片段-您研究过这意味着什么吗？鉴于这是React建议的，你怎么会怀疑这是否正常？你有没有试着改用它-发生了什么事？分享你的研究成果对每个人都有帮助，而且可能会带来更好的反响。我感谢你的回答。非常感谢。