React.js渲染时如何避免JSX组件凝结？

Question

我发现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>

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

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

不会冷凝的：

冷凝

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

这可能是荒谬的，没有任何意义，但我仍然感谢任何帮助，谢谢！

Answer 1

不要忘记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")
);

Answer 2

如果合适，您可以使用display: inline-block，边距等于空格宽度：

#wrapper span {
  display: inline-block;
  margin-right: 0.28em;
}