& nbsp jsx non funziona

Sto usando il tag & nbsp in jsx e non esegue il rendering dello spazio. Quello che segue è un piccolo frammento del mio codice. Per favore aiuto.

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

});

Vedi: JSX in profondità

Provare: Select Scenario:{'\u00A0'}

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

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

jsfiddle

Aggiornare

Dopo aver visto alcuni commenti e averlo provato. È venuto alla mia attenzione che l'uso di entites html all'interno di JSX funziona bene (a differenza di quanto affermato nel riferimento jsx-gotchas sopra [forse è obsoleto]).

Quindi usare qualcosa come R&D:, produrrebbe: "R&D". C'è un comportamento strano con  , che fa sì che il rendering in modo diverso, facendomi pensare che non funzioni:

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

Produce:

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

Scrivi il tuo jsxcodice racchiuso { }come mostrato di seguito.

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

Puoi mettere spazio o qualsiasi carattere speciale qui.

ad esempio nel tuo caso

Select Takeout Scenario: 

dovrebbe essere così

Select Takeout Scenario:{' '}

Funzionerà.

Come consiglio non dovresti usare &nbsp per aggiungere spazio extra, puoi usare css per ottenere lo stesso.

{'\u00A0'}funziona ma è difficile da leggere, quindi l'ho racchiuso in un componente funzione :

componenti / nbsp.js:

export default () => '\u00A0';

utilizzo:

Hello<Nbsp />world

Se questo non funziona per te, {' '}usa {'\u00A0'}.

{' '}renderà uno spazio ma ci sono alcuni casi in cui vuoi che l'altezza della riga sia resa anche in un caso lì vuoi uno spazio all'interno di un elemento HTML che non ha altro testo cioè:, <span style={{ lineHeight: '1em' }}>{' '}</span>in quel caso dovrai usare {'\u00A0'}all'interno del span o elemento HTML.

Prova a usare utf-8 nbsp, sembra uno spazio semplice, ma funziona bene senza codice aggiuntivo.

Forse dovresti creare una variabile per questo.

Per i simboli di copia: https://unicode-table.com/en/00A0/

Per generare automaticamente i testi, usa alcuni typograf.

Puoi anche utilizzare i letterali modello ES6, ad esempio

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