JSXで空白を追加するときのベストプラクティス

Question

JSXで空白を追加する方法（およびwhy）は理解していますが、スパンで

ラップの両方の要素

<div className="top-element-formatting"> 
    <span>Hello </span> 
    <span className="second-word-formatting">World!</span> 
</div> 

はJS

<div className="top-element-formatting"> 
    Hello {" "} 
    <span className="second-word-formatting">World!</span> 
</div> 

Answer 1

&nbspは、改行しないスペースがあるため、必ず使用する必要があります。ほとんどの場合、意図しない副作用があります。

古いバージョンのReactは、タグ内に改行があったときにv14より前のすべてのバージョンが自動的に<span> </span>を挿入すると考えています。

これはもはやこれを実行しませんが、これはあなた自身のコードでこれを処理する安全な方法です。 span（一般的に悪い習慣）を特に対象とするスタイリングがない限り、これは最も安全なルートです。

例によっては、かなり短いため、それらを1行にまとめることができます。長いラインのシナリオでは、これはおそらくそれを行うべきかです：

<div className="top-element-formatting"> 
    Hello <span className="second-word-formatting">World!</span> 
    <span> </span> 
    So much more text in this box that it really needs to be on another line. 
    </div> 

また、このメソッドは、自動トリミングテキストエディタに対して安全です。

他の方法はランダムなHTMLタグを挿入しない{' '}を使用しています。これは、スタイリング、要素の強調表示、およびDOMからの乱雑さを取り除く際に、より便利です。 React v14以前のバージョンとの下位互換性が必要ない場合は、この方法をお勧めします。

<div className="top-element-formatting"> 
    Hello <span className="second-word-formatting">World!</span> 
    {' '} 
    So much more text in this box that it really needs to be on another line. 
    </div> 

Answer 2

I Tとのスペースを追加1行に

<div className="top-element-formatting"> 
    Hello <span className="second-word-formatting">World!</span> 
    </div> 

をそれらを追加します。使い終わり 

私は見つけた空白を追加するのが最も混乱する方法ですが、空白をどれだけ追加するかを絶対に制御できます。

私は5にスペースを追加したい場合は：それは私が後でコードの週に戻ってくるときに私はここでやろうとしている正確に何を識別するのは簡単です

Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="second-word-formatting">World!</span>

。

Answer 3

あなたはテンプレートリテラル使用することができます。私たちは、式（中括弧内のコード）でリテラルを使用することができます

{` `} // Notice this sign " ` ",its not normal quotes. 

を：

`${2 * a + b}.?!=-`