Question

我在jsx中使用＆amp; 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>
    );
  },

});

Answer 1

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

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

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

或者： <div> </div>

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

更新

看到一些评论后，试一试。我注意到在JSX中使用html entites工作正常（不像上面的jsx-gotchas引用中所说的那样[也许它已经过时了]）。

所以使用类似：R&D的内容，会输出：＆＃39; R＆amp; D＆＃39;。  有一种奇怪的行为，导致它以不同的方式呈现，从而导致我认为它不起作用：

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

产地：

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

Answer 2

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

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

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

例如在你的情况下

Select Takeout Scenario:&nbsp;

应该是这样的

Select Takeout Scenario:{' '}

它会起作用。

作为建议您不应使用&nbsp添加额外空间，您可以使用 css 来实现相同的目标。

Answer 3

{'\u00A0'}可行，但很难阅读，因此我将其包装在function component中：

components / nbsp.js：

export default () => '\u00A0';

用法：

Hello<Nbsp />world

Answer 4

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

{' '}将呈现一个空格，但是在某些情况下，如果您还希望在不包含其他文本的HTML元素内包含空格的情况下也要呈现行高，则：{{1} }，在这种情况下，您需要在span或HTML元素内使用<span style={{ lineHeight: '1em' }}>{' '}</span>。

Answer 5

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

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

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

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

Answer 6

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

<Fragment> </Fragment>

Answer 7

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

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

jsx无法正常工作

7 个答案:

更新