从相同的JSX代码在服务器端和客户端生成的不同标记

Question

这是我的JSX：

<h4>{post.title} <small> (by {post.author})</small> </h4>

这是在服务器上(使用React.renderComponentToString())生成并发送到客户端的内容。

<h4 data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0">
    <span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.0">Why JavaScript is eating the world.</span>
    <span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.1"> </span>
    <small data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.2">
        <span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.2.0"> (by </span>
        <span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.2.1">spike</span>
        <span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.2.2">)</span>
    </small>
    <span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.3"></span>
</h4>

这是在客户端(在浏览器中)生成的内容：

<h4 data-reactid=".0.1.0.0.$posts-about.$2.0">
    <span data-reactid=".0.1.0.0.$posts-about.$2.0.0">Why JavaScript is eating the world.</span>
    <small data-reactid=".0.1.0.0.$posts-about.$2.0.1">
        <span data-reactid=".0.1.0.0.$posts-about.$2.0.1.0"> (by </span>
        <span data-reactid=".0.1.0.0.$posts-about.$2.0.1.1">spike</span>
        <span data-reactid=".0.1.0.0.$posts-about.$2.0.1.2">)</span>
    </small>
</h4>

显然，两个跨度丢失了，这导致了React attempted to use reuse markup in a container but the checksum was invalid。错误。

我认为问题出在JSX编译器中。捆绑并发送到客户端的生成的JavaScript与服务器使用的不同。

有趣的是，如果我“修复”JSX中的缩进，它就能正常工作。服务器和客户端都会生成相同的HTML标记，而不需要额外的跨度。

<h4>{post.title}
    <small> (by {post.author})</small>
</h4>

但是，我还没有在文档中读到任何关于小心宽度JSX缩进的内容，这让我有点紧张，因为这种问题很难调试(或者至少很烦人)。

Answer 1

这个问题是由reactify的过时版本引起的。因此，使用了两个不同版本的JSX编译器。正如@FakeRainBrigand指出的那样，JSX中处理空格的规则最近发生了变化，这导致了编译后的JavaScript中的差异。