& nbsp jsx nie działa

Używam tagu & nbsp w jsx i nie renderuje spacji. Poniżej znajduje się mały fragment mojego kodu, proszę o pomoc.

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

});

Zobacz: JSX w głębi

Próbować: Select Scenario:{'\u00A0'}

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

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

jsfiddle

Aktualizacja

Po obejrzeniu niektórych komentarzy i wypróbowaniu tego. Zwróciło moją uwagę, że używanie html entites wewnątrz JSX działa dobrze (w przeciwieństwie do tego, co jest napisane w powyższym dokumencie jsx-gotchas [może jest nieaktualne]).

Więc użycie czegoś takiego jak:, R&Dspowoduje wyświetlenie: „R&D”. Występuje dziwne zachowanie  , które powoduje, że renderuje się inaczej, przez co myślę, że nie działa:

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

Produkuje:

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

{'\u00A0'}działa, ale jest trudny do odczytania, więc opakowałem go w komponent funkcyjny :

komponenty / nbsp.js:

export default () => '\u00A0';

stosowanie:

Hello<Nbsp />world

Napisz swój jsxkod opakowany, { }jak pokazano poniżej.

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

Możesz tu wstawić spację lub dowolny znak specjalny.

np. w twoim przypadku

Select Takeout Scenario: 

tak powinno być

Select Takeout Scenario:{' '}

To będzie działać.

Jako rada, której nie powinieneś używać &nbspdo dodawania dodatkowej przestrzeni, możesz użyć CSS, aby osiągnąć to samo.

Jeśli to nie zadziała, {' '}użyj {'\u00A0'}.

{' '}wyrenderuje spację, ale są przypadki, w których chcesz, aby wysokość linii była również renderowana w przypadku, gdy potrzebujesz spacji wewnątrz elementu HTML, który nie ma innego tekstu, np .: <span style={{ lineHeight: '1em' }}>{' '}</span>w takim przypadku będziesz musiał użyć {'\u00A0'}wewnątrz span lub element HTML.

Spróbuj użyć utf-8 nbsp, wydaje się być prostą spacją, ale działa dobrze bez dodatkowego kodu.

Może powinieneś stworzyć do tego zmienną.

Kopiowanie symboli: https://unicode-table.com/en/00A0/

Aby automatycznie generować teksty, użyj typografu.

Możesz także użyć literałów szablonów ES6, np.

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