& nbsp jsx funktioniert nicht

Ich verwende das & nbsp-Tag in jsx und es rendert den Speicherplatz nicht. Das Folgende ist ein kleiner Ausschnitt meines Codes. Bitte helfen Sie.

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

});

Siehe: JSX im Detail

Versuchen: Select Scenario:{'\u00A0'}

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

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

jsfiddle

Aktualisieren

Nachdem ich einige der Kommentare gesehen und ausprobiert habe. Es ist mir aufgefallen, dass die Verwendung von HTML-Entiten in JSX gut funktioniert (im Gegensatz zu dem, was in der obigen jsx-gotchas-Referenz angegeben ist [möglicherweise ist es veraltet]).

Wenn Sie also etwas wie: verwenden R&D, wird Folgendes ausgegeben: 'F & E'. Es gibt ein seltsames Verhalten bei  , das dazu führt, dass es anders gerendert wird, sodass ich denke, dass es nicht funktioniert:

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

Produziert:

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

Schreiben Sie Ihren jsxCode { }wie unten gezeigt ein.

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

Hier können Sie Leerzeichen oder Sonderzeichen einfügen.

zB in deinem Fall

Select Takeout Scenario: 

sollte so sein

Select Takeout Scenario:{' '}

Es wird klappen.

Als Hinweis, den Sie nicht verwenden sollten &nbsp, um zusätzlichen Speicherplatz hinzuzufügen, können Sie CSS verwenden , um dies zu erreichen.

{'\u00A0'}funktioniert, ist aber schwer zu lesen, deshalb habe ich es in eine Funktionskomponente eingeschlossen :

Komponenten / nbsp.js:

export default () => '\u00A0';

Verwendung:

Hello<Nbsp />world

Wenn dies nicht für Sie arbeiten {' '}dann verwenden {'\u00A0'}.

{' '}wird ein Leerzeichen rendern, aber es gibt einige Fälle, in denen Sie möchten, dass die Zeilenhöhe auch in einem Fall gerendert wird, in dem Sie ein Leerzeichen in einem HTML-Element haben möchten, das keinen anderen Text enthält, dh: <span style={{ lineHeight: '1em' }}>{' '}</span>In diesem Fall müssen Sie es {'\u00A0'}innerhalb von verwenden span oder HTML-Element.

Versuchen Sie, utf-8 nbsp zu verwenden. Dies scheint ein einfacher Speicherplatz zu sein, funktioniert jedoch ohne zusätzlichen Code.

Vielleicht sollten Sie dafür eine Variable erstellen.

Für Kopiersymbole: https://unicode-table.com/de/00A0/

Verwenden Sie zum automatischen Generieren von Texten einige Typografien.

Sie können auch ES6-Vorlagenliterale verwenden, z.

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