我发现 React.js 在渲染时会压缩 JSX 组件的 HTML 标签，是否可以避免这种情况？
比如我有一个这样定义的jsx组件：
<div id="wrapper">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
渲染后，它以这种方式显示在浏览器中，浓缩：
<div id="wrapper"><span>1</span><span>2</span><span>3</span></div>
我知道问这样的问题有点奇怪，但有时我只是希望组件按照我定义的方式呈现。
以及压缩和非压缩代码之间的区别：
未浓缩：
浓缩：
它们自然是相同的代码。虽然我知道非压缩代码的行为与压缩代码不同，因为它包含一些制表符或空白字符，但我们最初是这样定义它的。
也许这样做很荒谬并且没有意义，但我仍然感谢任何帮助，谢谢！
不要忘记 JSX 只是函数调用的糖。所以这...
<div id="wrapper">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
...只是糖：
React.createElement("div", { id: "wrapper" },
React.createElement("span", null, "1"),
React.createElement("span", null, "2"),
React.createElement("span", null, "3")
);
如果您想要出现在不同行上的元素之间的空白，您可以手动添加一些...
<div id="wrapper">
<span>1</span>{" "}
<span>2</span>{" "}
<span>3</span>
</div>
…或者在同一行上打开新元素，它们之间有空格（JSX 转译器尊重元素之间的内容，而不是与元素相邻的换行符）：
<div id="wrapper">
<span>1</span> <span>2</span> <span>3</span>
</div>
…两者都转化为：
React.createElement("div", { id: "wrapper" },
React.createElement("span", null, "1"),
" ",
React.createElement("span", null, "2"),
" ",
React.createElement("span", null, "3")
);
如果合适，您可以使用display: inline-block等于空间宽度的边距：
#wrapper span {
display: inline-block;
margin-right: 0.28em;
}