Praktik terbaik saat menambahkan spasi di JSX


91

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>

1
Anda tidak memerlukan span ekstra, React telah memperbaiki masalah lama dengan node teks dan contoh kedua Anda baik
Dominic

1
Saya tidak tahu bahwa ada "praktik terbaik" yang ditentukan - tentu saja Anda tidak perlu menggabungkan semuanya dalam <span>tag, tetapi saya biasanya hanya mengikuti praktik HTML umum saat mengkhawatirkan ruang kosong.
arthurakay

Jawaban:


104

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>

10

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

div {
     white-space: pre-wrap;
}

Jika wadahnya fleksibel, Anda membutuhkan solusi ini.
Curtis

Ini adalah satu-satunya non- & nbsp; solusi yang berhasil untuk saya!
Magnus

@Magnus Terima kasih kembali, my man. Tidak ada solusi untuk jawaban ini yang benar-benar berfungsi untuk kasus khusus saya.
i_code

10

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.

Dalam versi React apa ini bekerja untuk Anda? 15.6.2 sepertinya mengabaikan ini.
smhg

1
@tokopedia itu tidak tergantung pada versi react. fitur ecmascript, ketikan. Anda dapat mengetik template Anda di konsol Chrome untuk menguji apakah template Anda baik-baik saja. Masalah bisa ada di pengaturan babel Anda juga.
Vasyl Gutnyk

1
Anda bingung antara template literal dengan ekspresi JSX. Untuk menambahkan spasi melalui JSX, cukup letakkan string yang terdiri dari satu karakter spasi dalam ekspresi JSX . Cara termudah untuk melakukannya adalah {' '}. Anda tidak memerlukan literal template untuk itu, meskipun itu berfungsi (dan begitu juga {" "}).
Dan Dascalescu

ya, kesalahan ketik itu agak membingungkan - dikoreksi. Bagaimanapun, saya yakin, 99,9% orang di sini mencari literal templat :)
Vasyl Gutnyk

6

Saya cenderung menggunakan &nbsp;

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.


6
Saya tidak dapat membayangkan dalam praktiknya apa yang akan menjadi penggunaan 5 ruang tanpa putus yang secara tipografis masuk akal, tetapi selain dari kasus seperti itu, ini salah digunakan dalam praktik. Jika Anda menggunakan ini untuk tata letak, Anda harus menggunakan CSS sebagai gantinya dan jika Anda perlu menambahkan spasi tetapi tidak mengharuskannya menjadi non-breaking, ada banyak ruang lain yang lebih masuk akal tipografi. Lihat pertanyaan ini, misalnya: stackoverflow.com/questions/8515365/…
guioconnor

1
@guioconnor mencoba untuk memperluas imajinasi Anda dan memikirkan aplikasi editor misalnya vscode dan Anda akan menemukan bahwa itu masuk akal tipografi lengkap: D.
Dan

5

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

Masukkan spasi reguler sebagai entitas HTML

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

Catatan samping: hari ini saya menemukan ini karena lebih cantik sedang memecahkan kode saya dengan memformat entitas luar angkasa. Saat Anda menggunakan {""}, ini bekerja pada satu baris dengan sendirinya, dan tidak akan putus.
gorhawk

Saya baru saja masuk untuk menambahkan ini ke jawaban saya sendiri. Saya telah memberi suara positif milik Anda sebagai gantinya.
tidak ditentukan

5

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 &nbsp;atau markup asing lainnya. Ini menciptakan lebih sedikit node teks daripada menggunakan {' '}, dan memungkinkan penggunaan entitas html di mana {' hello &amp; goodbye '}tidak.


3

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;'}} />

2

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

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

1
nbsp = Non-Breakable Space, yang merupakan karakter unicode berbeda dari spasi biasa dan membatasi pemutusan baris. Terkadang itu diinginkan, hanya menunjukkan bahwa itu tidak setara dengan opsi lain.
Beni Cherniavsky-Paskin

1

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

A<span style={{paddingLeft: '20px'}}>B</span>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.