&nbsp jsx无法正常工作

Question

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

});

Answer 1

请参阅:https://facebook.github.io/react/docs/jsx-gotchas.html

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

要么: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

要么: <div>&nbsp;</div>

https://jsfiddle.net/omerts/b4st33nw/

更新

看到一些评论后,尝试一下.我注意到在JSX中使用html entites工作正常(不像上面的jsx-gotchas引用中所述[也许它已经过时]).

所以使用类似的东西R&D,输出:'研发'.有一种奇怪的行为 ,导致它以不同的方式呈现,从而导致我认为它不起作用:

<div>This works simply:-&nbsp;-</div>
<div>This works simply:- {'\u00A0'}-</div>

生产:

This works simply:- -
This works simply:-  -

Answer 2

你可以简单地将它包裹起来Fragment：

<Fragment>&nbsp;</Fragment>

Answer 3

编写包含的jsx代码{ },如下所示.

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

你可以在这里放置空格或任何特殊字符.

例如在你的情况下

Select Takeout Scenario: 

应该是这样的

Select Takeout Scenario:{' '}

它会工作.

作为建议你不应该&nbsp用来增加额外的空间,你可以用css来实现同样的目的.

Answer 4

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

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

Answer 5

{'\u00A0'}可以，但是很难阅读，所以我将其包装在一个功能组件中：

组件/nbsp.js：

export default () => '\u00A0';

用法：

Hello<Nbsp />world