＆nbsp jsx无法正常工作

我在jsx中使用＆nbsp标记，它没有呈现空间。以下是我的代码的一小段。请帮助。

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

更新资料

看到一些评论后，尝试一下。引起我注意的是，在JSX中使用html实体可以很好地工作（与以上jsx-gotchas参考文献中所述的内容不同（也许是过时的））。

因此，使用类似：的内容R&D将输出：“ R＆D”。的行为异常 ，导致其呈现方式有所不同，因此我认为它不起作用：

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

产生：

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

编写jsx代码{ }，如下所示。

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

您可以在此处放置空格或任何特殊字符。

例如你的情况

Select Takeout Scenario: 

应该是这样的

Select Takeout Scenario:{' '}

会的。

作为建议，您不应该&nbsp用来添加额外的空间，可以使用css来实现。

{'\u00A0'}可以，但是很难阅读，所以我将其包装在一个功能组件中：

组件/nbsp.js：

export default () => '\u00A0';

用法：

Hello<Nbsp />world

如果这对您不起作用，请{' '}使用{'\u00A0'}。

{' '}会呈现一个空格，但是在某些情况下，您还希望在不包含其他文本的HTML元素内包含空格的情况下也要显示行高，例如<span style={{ lineHeight: '1em' }}>{' '}</span>，在这种情况下，您需要{'\u00A0'}在span或HTML元素。

尝试使用utf-8 nbsp，看似简单的空间，但无需额外代码即可正常工作。

也许您应该为此创建变量。

对于复制符号： https //unicode-table.com/en/00A0/

要自动生成文本，请使用一些typograf。

您还可以使用ES6模板文字，即

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