& nbsp jsx не работает

Question 1

Я использую тег & nbsp в jsx, и он не отображает пространство. Ниже приводится небольшой фрагмент моего кода. Пожалуйста, помогите.

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

Смотрите: JSX в деталях

Пытаться: Select Scenario:{'\u00A0'}

Или: <div dangerouslySetInnerHTML={{__html: 'Select Scenario:  '}} />

Или: <div> </div>

jsfiddle

Обновить

После просмотра некоторых комментариев и опробования. Я обратил внимание на то, что использование HTML Entites внутри JSX работает нормально (в отличие от того, что указано в приведенной выше ссылке на jsx-gotchas [возможно, оно устарело]).

Таким образом, используя что-то вроде:, R&Dбудет выводиться: 'R&D'. Существует странное поведение с  , из-за которого он отображается по-другому, что заставляет меня думать, что это не работает:

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

Производит:

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

Question 3

{'\u00A0'}работает, но его трудно читать, поэтому я заключил его в функциональный компонент :

компоненты / nbsp.js:

export default () => '\u00A0';

Применение:

Hello<Nbsp />world

Question 4

Напишите свой jsxкод в оболочке, { }как показано ниже.

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

Вы можете поставить здесь пробел или любой специальный символ.

например, в вашем случае

Select Takeout Scenario:&nbsp;

должно быть так

Select Takeout Scenario:{' '}

Это будет работать.

В качестве совета вы не должны использовать &nbspдля добавления дополнительного места, вы можете использовать CSS для достижения того же.

Question 5

Если это не работает для вас, {' '}используйте {'\u00A0'}.

{' '}будет отображать пространство, но есть некоторые случаи, когда вы хотите, чтобы высота строки также отображалась в случае, если вам нужно пространство внутри элемента HTML, не имеющего другого текста, то есть: <span style={{ lineHeight: '1em' }}>{' '}</span>в этом случае вам нужно будет использовать {'\u00A0'}внутри span или HTML-элемент.

Question 6

Попробуйте использовать utf-8 nbsp, кажется простым пространством, но хорошо работает без лишнего кода.

Возможно, вам стоит создать для этого переменную.

Для копирования символов: https://unicode-table.com/en/00A0/

Для автоматического создания текстов используйте типограф.

Question 7

Вы также можете использовать литералы шаблонов ES6, т.е.

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

Answer 1

101

Я использую тег & nbsp в jsx, и он не отображает пространство. Ниже приводится небольшой фрагмент моего кода. Пожалуйста, помогите.

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 Индранель Бенде
источник

Вы искали? Первое обращение: google.com/search?q=react+html+entities

Феликс Клинг,

Я не думаю, что с вашим кодом что-то не так. Какую версию Babel и React вы используете? Обязательно используйте последние версии. Вы можете видеть в ответе Babel, что сгенерированный код содержит неразрывные пробельные символы.

Felix Kling

Ну вот, первый хит. :) duckduckgo.com/?q=jsx+nbsp

Марк Стобер

Answer 2

Вы искали? Первое обращение: google.com/search?q=react+html+entities

Феликс Клинг,

Answer 3

Я не думаю, что с вашим кодом что-то не так. Какую версию Babel и React вы используете? Обязательно используйте последние версии. Вы можете видеть в ответе Babel, что сгенерированный код содержит неразрывные пробельные символы.

Felix Kling

Answer 4

Ну вот, первый хит. :) duckduckgo.com/?q=jsx+nbsp

Марк Стобер

Answer 5

214

Смотрите: JSX в деталях

Пытаться: Select Scenario:{'\u00A0'}

Или: <div dangerouslySetInnerHTML={{__html: 'Select Scenario:  '}} />

Или: <div> </div>

jsfiddle

Обновить

После просмотра некоторых комментариев и опробования. Я обратил внимание на то, что использование HTML Entites внутри JSX работает нормально (в отличие от того, что указано в приведенной выше ссылке на jsx-gotchas [возможно, оно устарело]).

Таким образом, используя что-то вроде:, R&Dбудет выводиться: 'R&D'. Существует странное поведение с  , из-за которого он отображается по-другому, что заставляет меня думать, что это не работает:

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

Производит:

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

омерц
источник

8

Таким образом, ответ заключается в использовании значения Unicode, соответствующего объекту html, и использования его внутри строки javascript. Спасибо за вашу помощь.

Indraneel Bende

@IndraneelBende  должен работать нормально. Возникла проблема со значением атрибута стиля.

Gaurav Kumar

@Gaurav Kumar, я тоже пробовал не получилось, просто игнорируется. Не могли бы вы добавить в мой ответ скрипку?

омерц

1

<div>Doesn't work: - -</div>отлично работает для меня. edit: Ну, это не похоже на неразрывное пространство.

Felix Kling

Ммм, хотя ожидаемый результат выводится на самом веб-сайте React ...

Феликс Клинг,

Answer 6

8

Таким образом, ответ заключается в использовании значения Unicode, соответствующего объекту html, и использования его внутри строки javascript. Спасибо за вашу помощь.

Indraneel Bende

Answer 7

@IndraneelBende  должен работать нормально. Возникла проблема со значением атрибута стиля.

Gaurav Kumar

Answer 8

@Gaurav Kumar, я тоже пробовал не получилось, просто игнорируется. Не могли бы вы добавить в мой ответ скрипку?

омерц

Answer 9

1

<div>Doesn't work: - -</div>отлично работает для меня. edit: Ну, это не похоже на неразрывное пространство.

Felix Kling

Answer 10

Ммм, хотя ожидаемый результат выводится на самом веб-сайте React ...

Феликс Клинг,

Answer 11

{'\u00A0'}работает, но его трудно читать, поэтому я заключил его в функциональный компонент :

компоненты / nbsp.js:

export default () => '\u00A0';

Применение:

Hello<Nbsp />world

Answer 12

17

Напишите свой jsxкод в оболочке, { }как показано ниже.

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

Вы можете поставить здесь пробел или любой специальный символ.

например, в вашем случае

Select Takeout Scenario:&nbsp;

должно быть так

Select Takeout Scenario:{' '}

Это будет работать.

В качестве совета вы не должны использовать &nbspдля добавления дополнительного места, вы можете использовать CSS для достижения того же.

WitVault
источник

2

Это просто для добавления пробелов, но не сработает для других HTML-сущностей

omerts

5

Однако это не неразрывное пространство.

TimoSolo

1

@TimoSolo Я не рекомендую вам использовать & nbsp или вышеупомянутую технику. Вы можете попробовать первый ответ, если мой не работает. Спасибо.

WitVault

«используйте css для достижения того же» - возможно, вы используете неразрывный пробел, чтобы текст не выпадал на следующую строку и не выходил за пределы элемента, содержащего текст. Если вы хотите использовать для этого свойства CSS, то один из способов сделать это - text-overflow: "clip"; overflow: "hidden";. Доступно несколько вариантов.

Дэн Крон,

Answer 13

2

Это просто для добавления пробелов, но не сработает для других HTML-сущностей

omerts

Answer 14

5

Однако это не неразрывное пространство.

TimoSolo

Answer 15

1

@TimoSolo Я не рекомендую вам использовать & nbsp или вышеупомянутую технику. Вы можете попробовать первый ответ, если мой не работает. Спасибо.

WitVault

Answer 16

«используйте css для достижения того же» - возможно, вы используете неразрывный пробел, чтобы текст не выпадал на следующую строку и не выходил за пределы элемента, содержащего текст. Если вы хотите использовать для этого свойства CSS, то один из способов сделать это - text-overflow: "clip"; overflow: "hidden";. Доступно несколько вариантов.

Дэн Крон,

Answer 17

Если это не работает для вас, {' '}используйте {'\u00A0'}.

{' '}будет отображать пространство, но есть некоторые случаи, когда вы хотите, чтобы высота строки также отображалась в случае, если вам нужно пространство внутри элемента HTML, не имеющего другого текста, то есть: <span style={{ lineHeight: '1em' }}>{' '}</span>в этом случае вам нужно будет использовать {'\u00A0'}внутри span или HTML-элемент.

Answer 18

Попробуйте использовать utf-8 nbsp, кажется простым пространством, но хорошо работает без лишнего кода.

Возможно, вам стоит создать для этого переменную.

Для копирования символов: https://unicode-table.com/en/00A0/

Для автоматического создания текстов используйте типограф.

Answer 19

0

Вы также можете использовать литералы шаблонов ES6, т.е.

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

Хемадри Дасари
источник

Какое отношение имеет этот ответ к HTML-объектам?

Boatcoder

Answer 20

Какое отношение имеет этот ответ к HTML-объектам?

Boatcoder

& nbsp jsx не работает

Ответы:

Обновить