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

});

Ответ 1

Смотрите: 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:-  -

Ответ 2

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

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

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

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

Select Takeout Scenario:&nbsp;

должен быть таким

Select Takeout Scenario:{' '}

Он будет работать.

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

Ответ 3

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

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

export default () => '\u00A0';

использование:

Hello<Nbsp />world

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Проще говоря после тега или хотите ли вы добавить.