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中没有空格。

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

1 个答案: