& nbsp jsx nie działa

Question 1

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

});

Question 2

Zobacz: JSX w głębi

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

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

Lub: <div> </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:-  -

Question 3

{'\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

Question 4

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:&nbsp;

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.

Question 5

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.

Question 6

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.

Question 7

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

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

Answer 1

101

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

});

html reactjs jsx Indraneel Bende
źródło

Czy szukałeś? Pierwsze trafienie: google.com/search?q=react+html+entities

Felix Kling

Nie sądzę, że jest coś złego w Twoim kodzie. Która wersja Babel i React jest używana? Upewnij się, że korzystasz z najnowszych wersji. Możesz zobaczyć w odpowiedzi Babel, że wygenerowany kod zawiera nierozdzielające białe znaki.

Felix Kling

Cóż, teraz pierwszy hit jest taki. :) duckduckgo.com/?q=jsx+nbsp

Marc Stober

Answer 2

Czy szukałeś? Pierwsze trafienie: google.com/search?q=react+html+entities

Felix Kling

Answer 3

Nie sądzę, że jest coś złego w Twoim kodzie. Która wersja Babel i React jest używana? Upewnij się, że korzystasz z najnowszych wersji. Możesz zobaczyć w odpowiedzi Babel, że wygenerowany kod zawiera nierozdzielające białe znaki.

Felix Kling

Answer 4

Cóż, teraz pierwszy hit jest taki. :) duckduckgo.com/?q=jsx+nbsp

Marc Stober

Answer 5

212

Zobacz: JSX w głębi

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

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

Lub: <div> </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:-  -

omerty
źródło

8

Więc odpowiedzią jest użycie wartości Unicode odpowiadającej encji html i użycie jej w ciągu javascript. Dzięki za pomoc.

Indraneel Bende

@IndraneelBende  powinno działać dobrze. Wystąpił problem z wartością atrybutu style.

Gaurav Kumar

@Gaurav Kumar, próbowałem też nie działa, jest po prostu ignorowany. Czy mógłbyś dodać do skrzypiec w mojej odpowiedzi?

omerts

1

<div>Doesn't work: - -</div>dla mnie działa dobrze. edycja: Cóż, nie wydaje się, aby była to niezłamująca przestrzeń.

Felix Kling

Mmh, produkuje jednak oczekiwane wyniki na samej stronie Reacta ...

Felix Kling

Answer 6

8

Więc odpowiedzią jest użycie wartości Unicode odpowiadającej encji html i użycie jej w ciągu javascript. Dzięki za pomoc.

Indraneel Bende

Answer 7

@IndraneelBende  powinno działać dobrze. Wystąpił problem z wartością atrybutu style.

Gaurav Kumar

Answer 8

@Gaurav Kumar, próbowałem też nie działa, jest po prostu ignorowany. Czy mógłbyś dodać do skrzypiec w mojej odpowiedzi?

omerts

Answer 9

1

<div>Doesn't work: - -</div>dla mnie działa dobrze. edycja: Cóż, nie wydaje się, aby była to niezłamująca przestrzeń.

Felix Kling

Answer 10

Mmh, produkuje jednak oczekiwane wyniki na samej stronie Reacta ...

Felix Kling

Answer 11

19

{'\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

Dmitrij Paszkiewicz
źródło

Answer 12

17

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:&nbsp;

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.

WitVault
źródło

2

To tylko po to, aby dodać spacje, ale nie będzie działać dla innych encji html

omerts

5

To jednak nie jest niezłomna przestrzeń.

TimoSolo

1

@TimoSolo Nie zachęcam do korzystania z & nbsp lub wyżej wymienionej techniki. Możesz spróbować pierwszej odpowiedzi, jeśli moja nie działa. Dzięki.

WitVault

„użyj CSS, aby osiągnąć to samo” - Możesz używać nierozdzielającej spacji, aby tekst nie spadał do następnej linii i poza granice elementu, który zawiera tekst. Jeśli zamiast tego chcesz użyć właściwości CSS, możesz to zrobić jednym ze sposobów text-overflow: "clip"; overflow: "hidden";. Dostępnych jest kilka odmian.

Dan Cron

Answer 13

2

To tylko po to, aby dodać spacje, ale nie będzie działać dla innych encji html

omerts

Answer 14

5

To jednak nie jest niezłomna przestrzeń.

TimoSolo

Answer 15

1

@TimoSolo Nie zachęcam do korzystania z & nbsp lub wyżej wymienionej techniki. Możesz spróbować pierwszej odpowiedzi, jeśli moja nie działa. Dzięki.

WitVault

Answer 16

„użyj CSS, aby osiągnąć to samo” - Możesz używać nierozdzielającej spacji, aby tekst nie spadał do następnej linii i poza granice elementu, który zawiera tekst. Jeśli zamiast tego chcesz użyć właściwości CSS, możesz to zrobić jednym ze sposobów text-overflow: "clip"; overflow: "hidden";. Dostępnych jest kilka odmian.

Dan Cron

Answer 17

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.

Answer 18

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.

Answer 19

0

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

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

Hemadri Dasari
źródło

Co ta odpowiedź ma wspólnego z encjami HTML?

boatcoder

Answer 20

Co ta odpowiedź ma wspólnego z encjami HTML?

boatcoder

& nbsp jsx nie działa

Odpowiedzi:

Aktualizacja