将`&lt;&gt;`和`作为相邻JSX元素的封闭元素是否正常？ 我可以使用`<div> `和`</div> `相反？

Question

我最近尝试运行以下代码

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 中找不到相应的“空”括号。 使用<div>和</div>作为封闭的 JSX 元素不是更有意义吗？

Answer 1

你遇到了对 React.Fragments 的需求

有时有必要在组件的返回中向 DOM 添加 JSX 元素列表（就像您拥有的一样）。 问题是所有组件都必须返回一个 JSX 元素，就像在单个 JSX 元素中一样。 因此，您不能从组件返回未包装元素的列表。

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

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

<></> 是 <React.Fragment></React.Fragment> 的缩写

更多关于 React.Fragment 的信息

Answer 2

这正是 <> </> 的目的，它们没有插入到 dom 中。

这对于 html 表很方便，例如不能在 tr 和 td 之间插入 div

Answer 3

是的，这是完全正常的。 不同之处在于 <></> 不会呈现 HTML 中的任何元素，而<div></div>将呈现额外的 div 并可能搞砸你的 css 或其他东西。

Answer 4

是的，这些都是正常的：因为它们是React.Fragments的简写。
这些片段充当包装 JSX 元素 - 就像 div 一样 - 但是这些片段不会呈现任何无用的 div 除非确实需要检查提供的链接以获取更多详细信息