&nbsp jsx 不工作

Question

我在 jsx 中使用   标签，它没有呈现 space。以下是我的 code.Please 帮助的一小段。

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

});

Answer 1

参见：JSX In Depth

尝试： 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:-  -

Answer 2

将您的 jsx 代码包裹在 { } 中，如下所示。

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

您可以在此处输入 space 或任何特殊字符。

例如你的情况

Select Takeout Scenario: 

应该是这样的

Select Takeout Scenario:{' '}

它会起作用。

作为建议，您不应使用 &nbsp 添加额外的 space，您可以使用 css 来实现相同的效果。

Answer 3

您还可以使用 ES6 模板文字，即

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

Answer 4

如果这对您不起作用 {' '} 然后使用 {'\u00A0'}。

{' '} 将呈现 space 但在某些情况下，当您希望在 [=19 中包含 space 时也呈现行高=] 没有其他文本的元素，即：<span style={{ lineHeight: '1em' }}>{' '}</span>，在这种情况下，您需要在 span 或 HTML 元素内使用 {'\u00A0'}。

Answer 5

{'\u00A0'} 有效但难以阅读，所以我将其包装在 function component:

components/nbsp.js:

export default () => '\u00A0';

用法：

Hello<Nbsp />world

Answer 6

尝试使用 utf-8 nbsp，看起来很简单 space，但无需额外代码即可正常工作。

也许，你应该为此创建变量。

对于复制符号： https://unicode-table.com/en/00A0/

要自动生成文本，请使用一些排版。

Answer 7

你可以简单地用 Fragment:

包装它

<Fragment>&nbsp;</Fragment>