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>

どうやら 2 つのスパンが欠落しており、それが原因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 の古いバージョンが原因でした。その結果、2 つの異なるバージョンの 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>

スペースが必要な場合は、要素の1つの中に挿入することができます

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

または、必要な場所に非常に明示的なリテラルスペースを配置します

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

それは私の新しいお気に入りの顔文字であるという副次的なボーナスを持っています{' '}

于 2014-09-24T18:52:08.447 に答える