Praktik terbaik saat menambahkan spasi di JSX

Saya mengerti bagaimana (dan mengapa ) menambahkan whitespace di JSX, tapi saya bertanya-tanya apa praktik terbaik atau apakah ada yang membuat perbedaan nyata?

Bungkus kedua elemen dalam satu bentang

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

Tambahkan mereka dalam satu baris

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

Tambahkan spasi dengan JS

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

Karena &nbspmenyebabkan Anda memiliki ruang non-breaking, Anda hanya boleh menggunakannya jika diperlukan. Dalam kebanyakan kasus, ini akan memiliki efek samping yang tidak diinginkan.

Versi React yang lebih lama, saya percaya semua yang sebelum v14, akan secara otomatis dimasukkan <span> </span>ketika Anda memiliki baris baru di dalam sebuah tag.

Meskipun mereka tidak lagi melakukan ini, itulah cara yang aman untuk menangani ini dalam kode Anda sendiri. Kecuali Anda memiliki gaya yang secara khusus menargetkan span(praktik buruk secara umum), maka ini adalah rute teraman.

Berdasarkan contoh Anda, Anda dapat menempatkannya dalam satu baris karena itu cukup pendek. Dalam skenario garis yang lebih panjang, inilah cara Anda mungkin melakukannya:

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

Metode ini juga aman terhadap editor teks pemangkasan otomatis.

Metode lainnya adalah menggunakan {' '}yang tidak memasukkan tag HTML acak. Ini bisa lebih berguna saat memberi gaya, menyorot elemen, dan menghilangkan kekacauan dari DOM. Jika Anda tidak memerlukan kompatibilitas mundur dengan React v14 atau sebelumnya, ini harus menjadi metode pilihan Anda.

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

Anda dapat menggunakan properti css white-space dan mengaturnya ke pre-wrap ke elemen div yang melingkupinya.

div {
     white-space: pre-wrap;
}

Anda dapat menambahkan spasi putih sederhana dengan tanda petik: {" "}

Anda juga bisa menggunakan template literal , yang memungkinkan untuk menyisipkan, ekspresi embedd (kode di dalam kurung kurawal):

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

Saya cenderung menggunakan  

Ini tidak cantik tapi ini cara yang paling tidak membingungkan untuk menambahkan spasi yang saya temukan dan memberi saya kendali mutlak atas berapa banyak spasi yang saya tambahkan.

Jika saya ingin menambahkan 5 spasi:

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

Sangat mudah untuk mengidentifikasi dengan tepat apa yang saya coba lakukan di sini ketika saya kembali ke kode beberapa minggu kemudian.

Anda tidak perlu memasukkan  atau membungkus ruang ekstra Anda dengan <span/>. Cukup gunakan kode entitas HTML untuk spasi - 

Masukkan spasi reguler sebagai entitas HTML

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

Saya telah mencoba memikirkan konvensi yang baik untuk digunakan saat menempatkan teks di samping komponen pada baris yang berbeda, dan menemukan beberapa opsi yang bagus:

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

atau

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

Masing-masing menghasilkan html bersih tanpa tambahan  atau markup asing lainnya. Ini menciptakan lebih sedikit node teks daripada menggunakan {' '}, dan memungkinkan penggunaan entitas html di mana {' hello & goodbye '}tidak.

Anda dapat menggunakan tanda kurung kurawal seperti ekspresi dengan tanda kutip ganda dan tanda kutip tunggal untuk spasi, misalnya,

{" "} or {' '}

Anda juga dapat menggunakan literal template ES6 yaitu,

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

Anda juga dapat menggunakan & nbsp seperti di bawah ini (inside span)

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

Anda juga dapat menggunakan & nbsp di hazardouslySetInnerHTML saat mencetak konten html

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

gunakan {} atau {``} atau  untuk membuat ruang antara elemen span dan konten.

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

Jika tujuannya adalah untuk memisahkan dua elemen, Anda dapat menggunakan CSS seperti di bawah ini:

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