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

Question

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

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

Answer 1

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

这里是documentation。

此代码（来自文档）：

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

与：

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

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

Answer 2

这是Fragment个简短模式的反应。

以下是文档和示例：docs