0

这是我的 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 缩进的任何内容，这让我有点紧张，因为这种问题很难（或至少令人讨厌）调试。

4

2 回答 2

3

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

于 2014-09-24T21:56:39.140 回答
1

当您了解规则时，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-24T18:52:08.447 回答