这很简单，但为了更好地解释，我还是从头开始吧.当一个元素都是小写（<div>，<a>...）时，它就是一个HTML标记。如果它以大写字母开头，则它是React.js组件。
HTML标签可以是打开的（<>）或关闭的（</>）。大多数HTML元素都需要一个结束标记（<a> </a>、<div> </div>、<section> </section>...），但也有一些元素是自结束元素，也就是不需要结束标记的元素（<img>、<link>...）。这些标签可以写成-<link />，<img />。这意味着它们是自关闭的，因为它们没有任何嵌套的内容。嵌套内容是我们放在<>和</>之间的内容。如果在这些元素之间没有要放置的内容，则该元素不需要结束标记。
让我们以<img />为例。此元素用于导入图像。我们通过在src属性中指定图像的放置位置来导入它：<img src="path to your image">的值。就是这样。那么，为什么在没有要关闭的内容的情况下编写这个带有结束标记的元素呢？<img src="path to your image"></img>的数据。此处没有嵌套内容，因此不需要结束标记。它是一个空元素。所以，我们就这样写：<img src="path to your image" />的数据。
对于React组件也是如此。如果您的组件已经创建，并且除了在您希望它显示的位置调用它之外，没有任何其他操作，那么您将把它编写为自关闭：<Component />的数据。但是如果您有一些内容要嵌套在要显示它的页面上，则应按如下方式编写：<Component></Component>的数据。
总而言之，如果您的元素中没有内容可以嵌套，那么您将自关闭它-<tag />。如果您的元素确实有嵌套内容，则需要打开和关闭标记-<tag> </tag>。因此，<div />与<div></div>或<Component />与<Component> </Component>之间的区别在于，<div />没有嵌套内容，而<div></div>有。<Component>也是一样。
希望我能帮你理解。

他们都在创建一个React-Element。但是你可以使用自关闭标签（<div />）来表示如果你没有任何内容嵌套在里面，那么就是一个空元素。所以它相当于关闭标签，当他们没有任何孩子。
平均值：<div> </div>与<div />相同
因此，如果没有任何内容嵌套在其中，则可以使用自关闭标记。
您的代码可能看起来像这样：

<Layout home>
  <section>
    <h2>Blog</h2>
    <ul>
      {allPostsData.map(({ id, date, title }) => (
        <li key={id}>
          {title}
          <br />
          {id}
          <br />
          {date}
        </li>
      ))}
    </ul>
  </section>
</Layout>

字符串