Reactjs 如何避免在React.js呈现JSX组件时压缩它？

我发现React.js在呈现时会压缩JSX组件HTML标记，有可能避免这种情况吗

例如，我有一个jsx组件是这样定义的：

<div id="wrapper">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

1.
2.
3.

渲染后，它将以以下方式显示在浏览器中：

<div id="wrapper"><span>1</span><span>2</span><span>3</span></div>

123

我知道问这样的问题有点奇怪，但有时我只是希望组件按照我定义的方式呈现

以及压缩代码和非压缩代码之间的区别：

未压缩：

浓缩：

它们自然是相同的代码。 虽然我知道非压缩代码与压缩代码的行为不同，因为它包含一些制表符或空白字符，但这是我们最初定义它的方式

---

也许这是荒谬的，没有意义这样做，但我仍然感谢任何帮助，谢谢

不要忘记JSX只是函数调用的糖分。所以这个

1.
2.
3.

…这只是糖：

React.createElement（“div”，{id:“wrapper”}，
React.createElement（“span”，null，“1”），
React.createElement（“span”，null，“2”），
React.createElement（“span”，null，“3”）
);

如果您想在不同行上显示的元素之间留空格，您可以手动添加一些

1{" "}
2{" "}
3.

…或在同一行上打开新元素，元素之间留有空格（JSX transpiler尊重元素之间的内容，而不是元素相邻的换行符）：

1 2 3

…这两个文件都可传输到此文件：

React.createElement（“div”，{id:“wrapper”}，
React.createElement（“span”，null，“1”），
" ",
React.createElement（“span”，null，“2”），
" ",
React.createElement（“span”，null，“3”）
);

如果合适，可以使用侧边距等于空间宽度的

显示：内联块

：

#包装跨度{
显示：内联块；
右边距：0.28em；
}

能否更具体地说明您看到的行为和想要的行为以及原因？这是

内联块的预期行为@insin下面的回答是正确的；手动添加空白或将跨度更改为
display:block
（尽管这取决于可能导致其他问题的应用程序），您也可以在JSX中执行此操作：
1{''}2{'}3
您还可以使用新的片段语法来保留空白。