& nbsp jsx 不工作

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


});
159976 次浏览
小开
最佳答案

见: JSX 纵深

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

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

<div>&nbsp;</div>

Jsfiddle

更新

在看了一些评论，并尝试了它。我注意到在 JSX 中使用 html 实体可以很好地工作(不像上面的 JSX-gotchas 引用中说的那样[也许它已经过时了])。

因此，使用类似于: R&amp;D的代码，将输出: ‘ R & D’。 &nbsp;有一个奇怪的行为，导致它呈现不同的效果，因此让我觉得它不起作用:

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

制作:

This works simply:- -
This works simply:-  -
小开

如下所示，编写用 { }包装的 jsx代码。

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

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

例如你的情况

Select Takeout Scenario:&nbsp;

应该是这样的

Select Takeout Scenario:{' '}

会成功的。

建议您不要使用 &nbsp来增加额外的空间，您可以使用 CSS来达到同样的效果。

小开

您也可以使用 ES6模板文字，例如,

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

如果这对你不起作用，那么使用 {'\u00A0'}。

{' '}将呈现一个空格，但是在某些情况下，如果你想在一个没有其他文本的 HTML 元素中使用空格，那么在这种情况下，你需要在 span 或者 HTML 元素中使用 {'\u00A0'}。

小开

{'\u00A0'}可以用，但是很难读，所以我用 功能组件包装了它:

组件/nbsp.js:

export default () => '\u00A0';

用途:

Hello<Nbsp />world
小开

尝试使用 utf-8 nbsp，似乎是简单的空间，但工作良好，没有额外的代码。

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

复制符号: Https://unicode-table.com/en/00a0/

为了自动生成文本，使用一些排版。

小开

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

<Fragment>&nbsp;</Fragment>

小开

我用的是 <span>&nbsp;</span> 而且成功了。


提交答案