jsx で タグを使用していますが、スペースがレンダリングされません。以下は私のコードの小さなスニペットです。助けてください。
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>
);
},
});
ベストアンサー1
見る:JSX の詳細
試す:Select Scenario:{'\u00A0'}
または:<div dangerouslySetInnerHTML={{__html: 'Select Scenario: '}} />
または:<div> </div>
アップデート
いくつかのコメントを見て、試してみたところ、JSX 内で HTML エンティティを使用すると正常に動作することがわかりました (上記の jsx-gotchas リファレンスに記載されている内容とは異なります [古い可能性があります])。
したがって、 のようなものを使用するとR&D
、 は 'R&D' を出力します。 には奇妙な動作があり
、異なるレンダリングを引き起こすため、動作しないと思われます。
<div>This works simply:- -</div>
<div>This works simply:- {'\u00A0'}-</div>
生産:
This works simply:- -
This works simply:- -