如何在反应中的 div class='App' 之前添加多个 static html 元素？

Question

出于特殊样式原因，我需要在我的 reactjs web 页面之前添加 3 个空 div，但如果这样做，我会收到错误消息：

解析错误：相邻的 JSX 元素必须包含在封闭标记中。 您想要一个 JSX 片段 <>...</> 吗？

我需要的是

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div class='App'> 
...
</div>

Answer 1

您收到此错误是因为您试图返回多个 JSX 元素，这不是 React 的工作方式

您正在尝试这样做：

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div class='App'> 
...
</div>

但是 React 会期望您返回包含所有元素的单个 div，因此您几乎需要做的就是将它们全部包装在一个 div 中，如下所示：

<div>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div class='App'> 
    ...
    </div>
</div>

Answer 2

您的错误消息包含您需要的详细信息：

解析错误：相邻的 JSX 元素必须包含在封闭标记中。 您想要一个 JSX 片段 <>...</> 吗？

这意味着您需要将元素包装在JSX 片段中，如下所示：

<>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div class='App'> 
    ...
  </div>
</>

请注意<>...</>只是<React.Fragment>...</React.Fragment>的简写。