webentwicklung-frage-antwort-db.com.de

& nbsp jsx funktioniert nicht

Ich verwende das & nbsp-Tag in jsx und rendert nicht den Platz. 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>
    );
  },

});
htmlreactjsjsx
42
Indraneel Bende

Siehe: https://facebook.github.io/react/docs/jsx-gotchas.html

Versuchen Sie: Select Scenario:{'\u00A0'}

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

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

https://jsfiddle.net/omerts/b4st33nw/

Aktualisieren

Nachdem ich einige Kommentare gesehen und probiert habe. Ich bin aufgefallen, dass die Verwendung von html-Entites in JSX gut funktioniert (im Gegensatz zu dem, was in der obigen Referenz zu jsx-gotchas angegeben ist [vielleicht ist es veraltet]).

Wenn Sie also etwas wie: R&amp;D verwenden, würde Folgendes ausgegeben werden: 'R & D'. Es gibt ein seltsames Verhalten mit &nbsp;, was dazu führt, dass es anders gerendert wird und 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:-  -
87
omerts

Schreiben Sie Ihren jsx-Code in {}, wie unten gezeigt.

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

Sie können hier Leerzeichen oder beliebige Sonderzeichen eingeben.

z. B. in Ihrem Fall

Select Takeout Scenario:&nbsp;

sollte so sein

Select Takeout Scenario:{' '}

Es wird klappen.

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

12
WitVault

{'\u00A0'} funktioniert, ist aber schwer zu lesen, also habe ich es in eine Funktionskomponente eingepackt

components/nbsp.js:

export default () => '\u00A0';

verwendungszweck:

Hello<Nbsp />world
1
Dmitry Pashkevich

Sie können auch ES6-Vorlagenliterale verwenden, d. H. 

`   <li></li>` or `  ${value}`
0
Hemadri Dasari

Wenn dies für Sie {' '} nicht funktioniert, verwenden Sie {'\u00A0'}.

{' '} rendert ein Leerzeichen, aber in manchen Fällen soll die Zeilenhöhe auch gerendert werden, wenn 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 verwenden {'\u00A0'} innerhalb des Bereichs oder des HTML-Elements.

0
Cory Robinson