html - jsx 不工作

Question

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

});

Answer 1

参见:JSX In Depth

尝试: 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:-  -