& nbsp jsx çalışmıyor

& Nbsp etiketini jsx'te kullanıyorum ve alanı oluşturmuyorum. Aşağıdaki kodumun küçük bir parçasıdır.Lütfen yardım edin.

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>
    );
  },

});

Bkz: JSX In Depth

Deneyin: Select Scenario:{'\u00A0'}

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

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

jsfiddle

Güncelleme

Bazı yorumları gördükten ve denedikten sonra. JSX içinde html entites kullanmanın iyi çalıştığı dikkatimi çekti (yukarıdaki jsx-gotchas referansında belirtilenden farklı olarak [belki eski olabilir]).

Yani şöyle bir şey kullanmak R&D, çıktı: 'Ar-Ge' olur. Tuhaf bir davranış var  , bu onun farklı şekilde oluşturulmasına neden oluyor ve bu yüzden çalışmadığını düşünmeme neden oluyor:

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

Üretir:

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

{'\u00A0'}çalışıyor ama okuması zor, bu yüzden onu bir işlev bileşenine sardım :

bileşenler / nbsp.js:

export default () => '\u00A0';

kullanım:

Hello<Nbsp />world

Senin yazın jsxsarılmış kodu { }aşağıda gösterildiği gibi.

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

Buraya boşluk veya herhangi bir özel karakter koyabilirsiniz.

örneğin senin durumunda

Select Takeout Scenario: 

böyle olmalı

Select Takeout Scenario:{' '}

Çalışacak.

Tavsiye olarak &nbspfazladan boşluk eklemek için kullanmamalısınız, aynısını elde etmek için css kullanabilirsiniz .

Bu sizin için işe yaramazsa {' '}kullanın {'\u00A0'}.

{' '}bir boşluk oluşturacaktır, ancak satır yüksekliğinin de başka bir metin içermeyen bir HTML öğesinin içinde bir boşluk olmasını istediğiniz bir durumda oluşturulmasını istediğiniz bazı durumlar vardır <span style={{ lineHeight: '1em' }}>{' '}</span>; bu durumda {'\u00A0'}, span veya HTML öğesi.

Utf-8 nbsp'yi kullanmayı deneyin, basit bir alan gibi görünse de fazladan kod olmadan iyi çalışıyor.

Belki bunun için değişken oluşturmalısınız.

Kopya sembolleri için: https://unicode-table.com/en/00A0/

Otomatik olarak metin oluşturmak için bazı tipograflar kullanın.

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

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