&nbsp jsx 不工作

Question

我在 jsx 中使用 &nbsp 标记，它没有渲染空间。以下是我的代码的一个小sn-p。请帮助。

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

你可以简单地用Fragment包装它：

<Fragment> </Fragment>

Answer 2

尝试使用utf-8 nbsp，看似简单的空间，但无需额外代码也能正常工作。

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

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

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

Answer 3

见：JSX In Depth

尝试： Select Scenario:{'\u00A0'}

或者： <div dangerouslySetInnerHTML={{__html: 'Select Scenario:  '}} />

或者： <div> </div>

jsfiddle

更新

在看到一些 cmets 并尝试了一下之后。我注意到在 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 4

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

组件/nbsp.js：

export default () => '\u00A0';

用法：

Hello<Nbsp />world

Answer 5

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

{' '} 将呈现一个空格，但在某些情况下，当您希望在没有其他文本的 HTML 元素内有一个空格的情况下也呈现行高时，即：<span style={{ lineHeight: '1em' }}>{' '}</span>，即如果您需要在 span 或 HTML 元素中使用 {'\u00A0'}。

Answer 6

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

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

Answer 7

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

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

您可以在此处放置空格或任何特殊字符。

例如你的情况

Select Takeout Scenario: 

应该是这样的

Select Takeout Scenario:{' '}

它会起作用的。

建议您不要使用&nbsp 来添加额外的空间，您可以使用css 来实现。