web-dev-qa-db-ja.com

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

});
htmlreactjsjsx
60
Indraneel Bende

参照： JSX In Depth

試してください：Select Scenario:{'\u00A0'}

または：<div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

または：<div>&nbsp;</div>

jsfiddle

更新

コメントをいくつか見て、試してみました。 JSX内でhtml entiteを使用すると問題なく動作することに気付きました（上記の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:-  -
120
omerts

以下に示すように、{}でラップされたjsxコードを記述します。

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

ここにスペースまたは特殊文字を配置できます。

例：あなたの場合

Select Takeout Scenario:&nbsp;

こうなるはず

Select Takeout Scenario:{' '}

それが動作します。

アドバイスとして、&nbspを使用して余分なスペースを追加しないでください。cssを使用して同じスペースを実現できます。

15
WitVault

{'\u00A0'}は機能しますが、読みにくいため、 function component でラップしました。

components/nbsp.js：

export default () => '\u00A0';

使用法：

Hello<Nbsp />world
5
Dmitry Pashkevich

これがうまくいかない場合は、{' '}を使用し、{'\u00A0'}を使用します。

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

3
Cory Robinson

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

`   <li></li>` or `  ${value}`
0
Hemadri Dasari