web-dev-qa-db-ja.com

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

JSXに空白を追加する方法（および why ）を理解していますが、ベストプラクティスとは何か、実際に違いがあるのか​​どうかは疑問です。

両方の要素をスパンにラップする

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

それらを1行に追加します

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

JSでスペースを追加

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-Word-formatting">World!</span>
</div>
javascriptreactjsreact-jsx
44
worker11811

&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>

この方法は、テキストエディターの自動トリミングに対しても安全です。

もう1つの方法は、ランダムな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>
60
Sawtaytoes

テンプレートリテラルを使用できます。

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

式でリテラルを使用できます（中括弧内のコード）：

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

&nbsp;を使用する傾向があります

きれいではありませんが、見つけたホワイトスペースを追加する最も簡単な方法であり、追加するホワイトスペースの量を完全に制御できます。

5つのスペースを追加する場合：

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

数週間後にコードに戻ったときに、ここでやろうとしていることを正確に特定するのは簡単です。

6
Daniel Murawsky

&nbsp;を挿入したり、余分なスペースを<span/>でラップする必要はありません。スペースにHTMLエンティティコードを使用する-&#32;

HTMLエンティティとして通常のスペースを挿入

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>
3
Andrey Ivlev

スペースの二重引用符と一重引用符の両方を含む式のような中括弧を使用できます。

{" "} or {' '}

ES6テンプレートリテラルも使用できます。つまり、

`   <li></li>` or `  ${value}`

以下のように＆nbspを使用することもできます

<span>sample text &nbsp; <span>

HTMLコンテンツを印刷する際に、dangerousSetInnerHTMLで＆nbspを使用することもできます。

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} />
2
Hemadri Dasari

私は、異なる行のコンポーネントの隣にテキストを配置するときに使用する良い規則を考えようとしており、いくつかの良いオプションを見つけました。

<p>
    Hello {
        <span>World</span>
    }!
</p>

または

<p>
    Hello {}
    <span>World</span>
    {} again!
</p>

これらはそれぞれ、追加の&nbsp;またはその他の無関係なマークアップなしでクリーンなhtmlを生成します。 {' '}を使用するよりも少ないテキストノードを作成し、{' hello &amp; goodbye '}が使用しないhtmlエンティティの使用を許可します。

1
undefined

{}または{``}または&nbsp;を使用して、span要素とコンテンツの間にスペースを作成します。

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>
0
KARTHIKEYAN.A

Cssプロパティの空白を使用して、それを囲むdiv要素に事前にラップするように設定できます。

div {
     white-space: pre-wrap;
}
0
in_the_making_always