jsx funktioniert nicht

Lesezeit: 5 Minuten

Indraneel Bende

Ich verwende das &nbsp-Tag in jsx und es rendert das Leerzeichen 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>
    );
  },

});

Hast du gesucht? Erster Treffer: google.com/search?q=react+html+entities

– Felix Klinge

19. Juni 2016 um 17:10 Uhr
Ich glaube nicht, dass an deinem Code etwas falsch ist. Welche Version von Babel und React wird verwendet? Stellen Sie sicher, dass Sie die neuesten Versionen verwenden. Sie können im sehen Babel-Ersatz dass der generierte Code geschützte Leerzeichen enthält.

– Felix Klinge

19. Juni 2016 um 17:29 Uhr
Nun, der erste Hit ist dieser. 🙂 duckduckgo.com/?q=jsx+nbsp

– Marc Stober

28. Juli 2016 um 20:34 Uhr

omerts

Sehen: JSX im Detail

Versuchen:
Select Scenario:{'\u00A0'}

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

Oder:
<div> </div>

jsfiddle

Aktualisieren

Nachdem ich einige der Kommentare gesehen und es ausprobiert habe. Mir ist aufgefallen, dass die Verwendung von HTML-Entities in JSX gut funktioniert (im Gegensatz zu dem, was in der obigen jsx-gotchas-Referenz angegeben ist [maybe it’s outdated]).

Verwenden Sie also etwas wie: R&D, würde Folgendes ausgeben: ‘R&D’. Es gibt ein seltsames Verhalten mit  was 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:-  -

Die Antwort besteht also darin, den Unicode-Wert zu verwenden, der der HTML-Entität entspricht, und ihn in einer Javascript-Zeichenfolge zu verwenden. Danke für Ihre Hilfe.

– Indraneel Bende

19. Juni 2016 um 16:29 Uhr
@IndraneelBende   sollte gut funktionieren. Es gibt ein Problem mit dem Wert im style-Attribut.

– Gaurav Kumar

19. Juni 2016 um 16:30 Uhr
<div>Doesn't work: - -</div> funktioniert gut für mich. bearbeiten: Nun, es scheint kein geschütztes Leerzeichen zu sein.

– Felix Klinge

19. Juni 2016 um 17:07 Uhr
Es ist erwähnenswert u00A0 wird von Browsern aufgrund von Phishing-Schemata auf die schwarze Liste gesetzt. kb.mozillazine.org/Network.IDN.blacklist_chars

– Andreas Hill

18. Februar 2020 um 13:53 Uhr
@AndrewHill In diesem Dokument geht es um Domainnamen. Was ist die Beziehung zu JSX/HTML?

– Infensus

1. September 2021 um 11:26 Uhr

{'\u00A0'} funktioniert, ist aber schwer zu lesen, also habe ich es in a verpackt Funktionskomponente:

Komponenten/nbsp.js:

export default () => '\u00A0';

Verwendungszweck:

Hello<Nbsp />world

Vielen Dank. Das funktioniert gut! FWIW kann auch in einem Vorlagenliteral wie verwendet werden const h = ` Hello${Nbsp()}world`; ... <span>{h}</span>

– Davey

24. Januar um 9:16 Uhr

WitVault

Schreib dein jsx Code eingepackt { } Wie nachfolgend dargestellt.

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

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

zB in Ihrem Fall

Select Takeout Scenario:&nbsp;

sollte so sein

Select Takeout Scenario:{' '}

Es wird klappen.

Als Rat sollte man es nicht verwenden &nbsp um zusätzlichen Platz hinzuzufügen, können Sie verwenden css dasselbe zu erreichen.

Dies dient nur dazu, Leerzeichen hinzuzufügen, funktioniert aber nicht für andere HTML-Entitäten

– omerts

19. Juni 2016 um 17:04 Uhr
Das nicht nicht brechend Platz aber.

– TimoSolo

30. August 2017 um 21:18 Uhr
@TimoSolo Ich ermutige Sie nicht, &nbsp oder die oben erwähnte Technik zu verwenden. Sie können die erste Antwort versuchen, wenn meine nicht funktioniert. Vielen Dank.

– WitVault

31. August 2017 um 13:15 Uhr
“Css verwenden, um dasselbe zu erreichen” – Möglicherweise verwenden Sie geschützte Leerzeichen, damit Ihr Text nicht in die nächste Zeile und außerhalb der Begrenzung des Elements fällt, das den Text enthält. Wenn Sie stattdessen CSS-Eigenschaften verwenden möchten, ist dies eine Möglichkeit text-overflow: "clip"; overflow: "hidden";. Es sind einige Variationen verfügbar.

– Dan Cron

22. Oktober 2018 um 13:41 Uhr

Du könntest es einfach damit umwickeln Fragment:

<Fragment> </Fragment>

Wenn dies für Sie nicht funktioniert {' '} dann benutze {'\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 verwenden {'\u00A0'} innerhalb des span- oder HTML-Elements.

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

Vielleicht sollten Sie dafür eine Variable erstellen.

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

Verwenden Sie zum automatischen Generieren von Texten Typograf.

Hämadri Dasari

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

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

Was hat diese Antwort mit HTML-Entitäten zu tun?

– Bootscoder

2. Oktober 2019 um 20:49 Uhr

13339900cookie-checkjsx funktioniert nicht

#html #jsx #reagieren