jsxが機能しない 質問する

  jsxが機能しない 質問する

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

});

ベストアンサー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:-  -

おすすめ記事