& 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}`