& nbsp jsx tidak berfungsi

Saya menggunakan & nbsp tag di jsx dan tidak memberikan spasi. Berikut ini adalah potongan kecil kode saya. Tolong bantu.

var Reporting=React.createClass({

  render: function(){
    return(
      <div style={divPositionReporting}>
          <p>Pricing Reports</p>
          <hr></hr>
          Select Scenario:&nbsp;&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
          Select Takeout Scenario:&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
      </div>
    );
  },

});

Lihat: JSX In Depth

Mencoba: Select Scenario:{'\u00A0'}

Atau: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

Atau: <div>&nbsp;</div>

jsfiddle.dll

Memperbarui

Setelah melihat beberapa komentar, dan mencobanya. Telah menjadi perhatian saya bahwa menggunakan html entites di dalam JSX berfungsi dengan baik (tidak seperti yang disebutkan dalam referensi jsx-gotchas di atas [mungkin sudah usang]).

Jadi menggunakan sesuatu seperti R&D:, akan menghasilkan: 'R&D'. Ada perilaku aneh dengan  , yang menyebabkannya dirender secara berbeda, sehingga menyebabkan saya berpikir itu tidak berfungsi:

<div>This works simply:-&nbsp;-</div>
<div>This works simply:- {'\u00A0'}-</div>

Menghasilkan:

This works simply:- -
This works simply:-  -

{'\u00A0'}berfungsi tetapi sulit dibaca, jadi saya membungkusnya dalam komponen fungsi :

komponen / nbsp.js:

export default () => '\u00A0';

pemakaian:

Hello<Nbsp />world

Tulis jsxkode Anda yang dibungkus { }seperti yang ditunjukkan di bawah ini.

<h1>Code {' '}</h1>

Anda dapat meletakkan spasi atau karakter khusus apa pun di sini.

misalnya dalam kasus Anda

Select Takeout Scenario: 

harus seperti ini

Select Takeout Scenario:{' '}

Ini akan berhasil.

Sebagai Saran Anda tidak boleh menggunakan &nbspuntuk menambah ruang ekstra, Anda dapat menggunakan css untuk mencapai hal yang sama.

Jika ini tidak berhasil untuk Anda, {' '}gunakan {'\u00A0'}.

{' '}akan membuat spasi tetapi ada beberapa kasus ketika Anda ingin tinggi baris juga dirender dalam kasus di sana Anda menginginkan spasi di dalam elemen HTML yang tidak memiliki teks lain yaitu:, <span style={{ lineHeight: '1em' }}>{' '}</span>dalam kasus itu Anda harus menggunakan {'\u00A0'}di dalam span atau elemen HTML.

Coba gunakan utf-8 nbsp, tampaknya sebagai ruang yang sederhana, tetapi berfungsi dengan baik tanpa kode tambahan.

Mungkin, Anda harus membuat variabel untuk ini.

Untuk menyalin simbol: https://unicode-table.com/en/00A0/

Untuk menghasilkan teks secara otomatis, gunakan beberapa typograf.

Anda juga dapat menggunakan literal template ES6 yaitu,

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