React.js 渲染时如何避免 JSX 组件凝聚？答案

【问题标题】：How to avoid JSX component from condensing when React.js rendering it?React.js 渲染时如何避免 JSX 组件凝聚？
【发布时间】：2015-09-21 03:05:36
【问题描述】：

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

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

以及压缩和不压缩代码的区别：

不压缩：

精简：

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

也许这样做很荒谬而且毫无意义，但我仍然感谢任何帮助，谢谢！

【问题讨论】：

您能否更具体地说明您所看到的行为以及您想要的行为以及原因？
这是inline-block 元素的预期行为。 @insin 下面的回答是正确的；手动添加空格或将跨度更改为display: block;（尽管取决于您的应用程序可能会导致其他问题）

标签： reactjs

【解决方案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")
);

【讨论】：

你也可以在 JSX 中这样做：<div id="wrapper"><span>1</span>{' '}<span>2</span>{' '}<span>3</span></div>
您还可以使用新的 Fragment 语法来保留空格。

【解决方案2】：

如果合适的话，你可以使用display: inline-block，边距等于空间宽度：

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

【讨论】：