Css React和纯HTML实现之间的跨度宽度存在差异

当我注意到一个无法解释的差异时，我正试图找出如何使用ReactJS在元素之间应用水平空间

以下为SSCCE：（也在中）

福
酒吧
var rce=React.createElement.bind（React）；
var x=（rce（'div'，{}
，rce（'span'，{}，'foo'）
，rce（'span'，{style:{display:'inline block'，width:'30px'}）
，rce（'span'，{}，'bar'）；
render（x，document.getElementById（'div0'）；

上述代码在输出时生成：

假设DOM元素是相同的（除了存在

datareactId

属性外）：

---

那么，为什么会出现这种间距差异呢？

这是因为HTML代码中内联HTML元素之间存在间距。默认情况下，React将删除它

    <span>foo</span><span style='display:inline-block; width:30px'></span><span>bar</span>

foobar

HTML代码中的注释空间也可以达到同样的效果

<span>foo</span><!-- 
--><span style='display:inline-block; width:30px'></span><!-- 
--><span>bar</span>

foobar

此外，代码实际上也有所不同。正如您所注意到的，React生成的HTML中没有空格

---

我已经接受了你的回答，但我认为我应该删除这个问题。它不太可能帮助其他人，因为它与反应无关。请不要删除此内容。这救了我一天！

<span>foo</span><!-- 
--><span style='display:inline-block; width:30px'></span><!-- 
--><span>bar</span>