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

Я использую тег & 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>
    );
  },

});

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

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

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

Или: <div>&nbsp;</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:-  -

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

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

export default () => '\u00A0';

Применение:

Hello<Nbsp />world

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

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

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

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

Select Takeout Scenario: 

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

Select Takeout Scenario:{' '}

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

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

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

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

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

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

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

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

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

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