不同的标记在服务器和客户端从同一个JSX代码

产生这是我的JSX：不同的标记在服务器和客户端从同一个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与服务器使用的JavaScript不同。

有趣的是，如果我在JSX中“修复”了缩进，它就可以工作。服务器和客户端都会生成相同的HTML标记，而没有这些额外的跨度。

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

但是我还没有关于小心宽度JSX压痕的文档中读什么，这让我有点紧张，因为这样那样的问题是很难（或者至少烦人）调试。

来源

2014-09-24 tobik

当你理解规则时，JSX处理空白会很有意义。

如果是在同一行会之前或移除

最后一条规则的一个非常好的从HTML不同的新行字符后的工作完全像HTML空白直接

空间原因。如果你有事情的清单，你不希望在HTML它们之间的空间，你必须选择其中之一：

<ul><li>Apples</li><li>Oranges</li></ul>

<ul><!-- 
    --><li>Apples</li><!-- 
    --><li>Oranges</li><!-- 
--></ul>

随着美妙的那些，在JSX它可以像第一个，或

<ul> 
    <li>Apples</li> 
    <li>Oranges</li> 
</ul>

而且如果你想你的空间可以插入它里面的内容之一

<ul> 
    <li>Apples </li> 
    <li>Oranges </li> 
</ul>

或者把一个非常明确的文字空间，您希望它

<ul> 
    <li>Apples</li> 
    {' '} 
    <li>Oranges</li> 
</ul>

^{^{它拥有的是我的新宠表情{' '}}}

来源

2014-09-24 18:52:08 FakeRainBrigand

感谢您的澄清，但我仍然不明白为什么它在客户端和服务器上的行为不同。编译器和规则应该是相同的。 – tobik 2014-09-24 18:58:33

@tobik不久前对空白规则进行了更改，因此您可能在其中一个环境中使用了较旧版本的编译器。 – FakeRainBrigand 2014-09-24 21:23:09

好吧，就是这样。我正在使用reactify的过时版本。升级到最新版本后，问题消失。编译现在在服务器和客户端都是一致的。我会将其作为单独的答案发布。感谢您的帮助。 – tobik 2014-09-24 21:44:05

问题是由一个彻头彻尾造成侧奖励达到的版本。结果使用了两种不同版本的JSX编译器。正如@FakeRainBrigand指出的那样，JSX中用于处理空白的规则最近已经发生了变化，这导致了编译后JavaScript的差异。

来源

2014-09-24 21:56:39 tobik

不同的标记在服务器和客户端从同一个JSX代码

回答

相关问题