&nbsp jsx 不工作

Question

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

});

原文由 Indraneel Bende 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

请参阅： 深入了解 JSX

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

原文由 omerts 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

{'\u00A0'} 有效但难以阅读，所以我将它包装在一个 函数组件 中：

组件/nbsp.js：

 export default () => '\u00A0';

用法：

 Hello<Nbsp />world

原文由 Dmitry Pashkevich 发布，翻译遵循 CC BY-SA 4.0 许可协议