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

Question

当我发现一个我无法解释的差异时，我试图弄清楚如何使用 ReactJS 在元素之间应用水平空间。

SSCCE 下面：（也在jsfiddle）

<!doctype html>
<html>
  <body>
    <span>foo</span>
    <span style='display:inline-block; width:30px'></span>
    <span>bar</span>
    <div id='div0'></div>
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js">    </script>
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
    <script type='text/javascript'>
     var rce = React.createElement.bind(React);
     var x = (rce('div', {}
       , rce('span', {}, 'foo')
       , rce('span', {style: {display: 'inline-block', width: '30px'}})
       , rce('span', {}, 'bar')));
     ReactDOM.render(x, document.getElementById('div0'));
    </script>
  </body>
</html>

以上代码在输出中产生：

鉴于 DOM 元素是相同的（data-reactid 属性的存在除外）：

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

Answer 1

这是因为您的 HTML 代码中的内联 html 元素之间存在间距。 React 默认删除它。

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

DEMO

使用 HTML 代码中的注释空间可以实现相同的结果。

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

DEMO

而且代码实际上确实不同。你可以注意到 React 生成的 HTML 中没有空格。