这些没有名称的JSX元素是什么意思？

Question

我刚刚遇到了这个React代码，其中包含没有名称的标签（<>和</>）。它破坏了我的编辑器上的语法高亮显示，但是我猜它是有效的，因为它已经存在了一段时间了。知道这意味着什么以及这种模式是什么吗？

return (
    <>
        <span className="example">{something}</span>
        <br />
        {object.example}{' '}
    </>
);

Answer 1

<></>与相同，<React.Fragment></React.Fragment>因此您不需要将span和br元素包装到另一个元素中。

这是文档。

这段代码（来自文档）：

const { Fragment } = React;
<Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</Fragment>

是相同的：

<>
  <ChildA />
  <ChildB />
  <ChildC />
</>

注意：如果使用<></>，则无需声明React.Fragment。