＆nbsp jsxが機能しない

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

});

参照：JSXの詳細

試してください： 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:-  -

あなたの書くjsxに包まれたコードを{ }以下に示すように。

<h1>Code {' '}</h1>

ここにスペースや特殊文字を入れることができます。

例えばあなたの場合

Select Takeout Scenario: 

このようになるはずです

Select Takeout Scenario:{' '}

それが動作します。

&nbsp余分なスペースを追加するために使用すべきではないアドバイスとして、CSSを使用して同じことを実現できます。

{'\u00A0'}動作しますが読みにくいので、関数コンポーネントでラップしました：

components / nbsp.js：

export default () => '\u00A0';

使用法：

Hello<Nbsp />world

これでうまくいかない場合は{' '}、を使用してください{'\u00A0'}。

{' '}はスペースをレンダリングしますが、他のテキストを持たないHTML要素内にスペースが必要な場合に行の高さもレンダリングしたい場合があります。つまり<span style={{ lineHeight: '1em' }}>{' '}</span>、の場合、{'\u00A0'}内部で使用する必要がありますスパンまたはHTML要素。

utf-8 nbspを使用してみてください。単純なスペースのように見えますが、余分なコードがなくてもうまく機能します。

たぶん、このための変数を作成する必要があります。

コピーシンボルの場合：https : //unicode-table.com/en/00A0/

テキストを自動的に生成するには、いくつかのタイポグラフを使用します。

ES6テンプレートリテラルを使用することもできます。

`   <li></li>` or `  ${value}`