JSX'e boşluk eklerken en iyi uygulama

JSX'e nasıl (ve neden ) boşluk ekleyeceğimi anlıyorum, ancak en iyi uygulamanın ne olduğunu veya herhangi birinin gerçek bir fark yaratıp yaratmadığını merak ediyorum.

Her iki öğeyi bir aralıkta sarın

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

Onları tek satıra ekleyin

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

JS ile alan ekleyin

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

&nbspBölünemez boşluklara sahip olmanıza neden olduğundan , sadece gerekli yerlerde kullanmalısınız. Çoğu durumda, bunun istenmeyen yan etkileri olacaktır.

React'in eski sürümleri, inanıyorum ki v14'ten öncekiler <span> </span>, bir etiketin içinde yeni bir satırınız olduğunda otomatik olarak ekleyecekti .

Artık bunu yapmasalar da, bunu kendi kodunuzda halletmenin güvenli bir yolu. Özel olarak hedefleyen stiliniz yoksa span(genel olarak kötü uygulama), o zaman bu en güvenli yoldur.

Örneğinize göre, oldukça kısa olduğu için onları tek bir satıra koyabilirsiniz. Daha uzun senaryolarda, muhtemelen bunu şu şekilde yapmalısınız:

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

Bu yöntem, otomatik kırpılan metin düzenleyiciler için de güvenlidir.

Diğer yöntem, {' '}rastgele HTML etiketleri eklemeyen kullanmaktır . Bu, öğelerin stilini belirlerken, vurgularken ve DOM'daki karmaşayı kaldırırken daha yararlı olabilir. React v14 veya önceki sürümlerle geriye dönük uyumluluğa ihtiyacınız yoksa tercih ettiğiniz yöntem bu olmalıdır.

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

Beyaz boşluk css özelliğini kullanabilir ve onu çevreleyen div öğesine önceden saracak şekilde ayarlayabilirsiniz.

div {
     white-space: pre-wrap;
}

Tırnak işaretiyle basit beyaz boşluk ekleyebilirsiniz: {" "}

Ayrıca , ifadelerin eklenmesine, yerleştirilmesine izin veren şablon değişmezlerini de kullanabilirsiniz (küme parantezleri içindeki kod):

`${2 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.

Kullanmaya eğilimliyim  

Güzel değil ama bulduğum boşlukları eklemenin en az kafa karıştırıcı yolu ve ne kadar boşluk eklediğim konusunda bana mutlak kontrol sağlıyor.

5 boşluk eklemek istersem:

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

Haftalar sonra koda geri döndüğümde, burada ne yapmaya çalıştığımı tam olarak belirlemek kolay.

 Fazladan alanınızı eklemenize veya sarmanıza gerek yoktur <span/>. Alan için HTML varlık kodunu kullanın - 

HTML varlığı olarak normal boşluk ekle

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

Farklı satırlardaki bileşenlerin yanına metin yerleştirirken kullanmak için iyi bir kural bulmaya çalışıyordum ve birkaç iyi seçenek buldum:

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

veya

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

Bunların her biri, ek  veya diğer harici işaretler olmadan temiz html üretir . Kullanmaktan daha az metin düğümü oluşturur {' '}ve kullanılmayan yerlerde html varlıklarının kullanılmasına izin verir {' hello & goodbye '}.

Boşluk için hem çift tırnak hem de tek tırnak içeren ifade gibi küme parantezlerini kullanabilirsiniz, yani,

{" "} or {' '}

ES6 şablon değişmezlerini de kullanabilirsiniz, yani,

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

Ayrıca & nbsp'yi aşağıdaki gibi de kullanabilirsiniz (aralık içinde)

<span>sample text &nbsp; </span>

Html içeriğini yazdırırken & nbsp'yi de dangerouslySetInnerHTML'de kullanabilirsiniz

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

span öğesi ve içerik arasında boşluk oluşturmak için {} veya {`}  kullanın .

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

Amaç iki öğeyi ayırmaksa, aşağıdaki gibi CSS kullanabilirsiniz:

A<span style={{paddingLeft: '20px'}}>B</span>