我在jsx中使用&nbsp标记,它没有呈现空间。以下是我的代码的一小段。请帮助。
var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario: <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario: <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> </div> ); }, });
另请:深入了解JSX
尝试: Select Scenario:{'\u00A0'}
Select Scenario:{'\u00A0'}
要么: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: '}} />
<div dangerouslySetInnerHTML={{__html: 'Select Scenario: '}} />
要么: <div> </div>
<div> </div>
jsfiddle
看到一些评论后,尝试一下。引起我注意的是,在JSX中使用html实体可以很好地工作(与上述jsx-gotchas参考文献中所述的内容不同(也许已过时))。
因此,使用类似:的内容R&D将输出:“ R&D”。的行为异常 ,导致其呈现方式有所不同,从而使我认为它不起作用:
R&D
<div>This works simply:- -</div> <div>This works simply:- {'\u00A0'}-</div>
产生:
This works simply:- - This works simply:- -