使用相同的 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 的差异。

Answer 2

当您了解规则时，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>

^{它的附带好处是成为我最喜欢的新表情{' '}}