纯 HTML 与 React。相同的内容呈现不均。为什么？

Question

我正在使用 react 0.14 和 Foundation 5.5.2，并且在使用 Foundation 的 button groups 时注意到了一件奇怪的事情。当我用纯 HTML 编写它们时，按钮组会填充整个水平空间，但是当我使用 React 编写它们时，它们不会，即使我使用的是完全相同的代码。

我使用了一些 CSS diff 工具，它没有发现两者之间的样式有任何区别。当我检查代码时，我也看不出任何区别。我也尝试了不同的浏览器，但问题仍然存在。

我创建了a JS-fiddle 来显示问题。如您所见，前两个按钮组跨越整个宽度，但不是由 React 呈现的。

.

Answer 1

两种呈现的 HTML 并不完全相同：纯 HTML 中的缩进呈现为 <li> 元素之间的空白，而 React 删除了该空白（它可能来自 JSX 转译器）。

在这个小提琴上，我通过用 HTML cmets 包围缩进删除了空格，所以它不会再被渲染： https://jsfiddle.net/3s5mego4/

现在两个输出完全相同。