小编典典

jsx不起作用

reactjs

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

});

阅读 303

收藏
2020-07-22

共1个答案

小编典典

另请:深入了解JSX

尝试: Select Scenario:{'\u00A0'}

要么: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

要么: <div>&nbsp;</div>

jsfiddle

更新资料

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

因此,使用类似:的内容R&amp;D将输出:“ R&D”。的行为异常&nbsp;,导致其呈现方式有所不同,从而使我认为它不起作用:

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

产生:

This works simply:- -
This works simply:-  -
2020-07-22