Html jsx 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37909134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
  jsx not working
提问by Indraneel Bende
I am using the   tag in jsx and it is not rendering the space. The following is a small snippet of my code.Please help.
我在 jsx 中使用 标记，但它没有渲染空间。以下是我的代码的一小段。请帮忙。
var Reporting=React.createClass({
render: function(){
return(
<div style={divPositionReporting}>
<p>Pricing Reports</p>
<hr></hr>
Select Scenario:
<select>
<option></option>
</select>
<button type="button">Get Pricing Report</button>
<br/>
Select Takeout Scenario:
<select>
<option></option>
</select>
<button type="button">Get Pricing Report</button>
<br/>
</div>
);
},
});
回答by omerts
See: JSX In Depth
Try:
Select Scenario:{'\u00A0'}
尝试：
Select Scenario:{'\u00A0'}
Or:
<div dangerouslySetInnerHTML={{__html: 'Select Scenario: '}} />
或者：
<div dangerouslySetInnerHTML={{__html: 'Select Scenario: '}} />
Or:
<div> </div>
或者：
<div> </div>
Update
更新
After seeing some of the comments, and trying it out. It has come to my attention that using html entites inside JSX works fine (unlike what is stated in the above jsx-gotchas reference [maybe it's outdated]).
看了一些评论，试了一下。我注意到在 JSX 中使用 html 实体可以正常工作（与上述 jsx-gotchas 参考中所述的不同[也许它已经过时了]）。
So using something like: R&D, would output: 'R&D'.
There is a weird behavior with , which causes it to render differently, thus causing me to think it doesn't work:
所以使用类似: R&D, 会输出：'R&D'。有一个奇怪的行为 ，导致它以不同的方式呈现，从而使我认为它不起作用：
<div>This works simply:- -</div>
<div>This works simply:- {'\u00A0'}-</div>
Produces:
产生：
This works simply:- -
This works simply:- -
回答by WitVault
Write your jsxcode wrapped in {}as shown below.
编写您的jsx代码{}，如下所示。
<h1>Code {' '}</h1>
You can put space or any special character here.
您可以在此处输入空格或任何特殊字符。
e.g in your case
例如在你的情况下
Select Takeout Scenario:
should be like this
应该是这样的
Select Takeout Scenario:{' '}
It will work.
它会起作用。
As Advice you should not use  to add extra space, you can use cssto achieve same.
作为建议，您不应该使用 添加额外空间，您可以使用css来实现相同的效果。
回答by Dmitry Pashkevich
{'\u00A0'}works but is hard to read, so I wrapped it in a function component:
{'\u00A0'}有效但很难阅读，所以我将它包装在一个函数组件中：
components/nbsp.js:
组件/nbsp.js：
export default () => '\u00A0';
usage:
用法：
Hello<Nbsp />world
回答by Cory Robinson
If this doesn't work for you {' '}then use {'\u00A0'}.
如果这对您不起作用，请{' '}使用{'\u00A0'}.
{' '}will render a space but there are some cases when you want the line height to also be rendered in a case there you want a space inside an HTML element that has no other text ie: <span style={{ lineHeight: '1em' }}>{' '}</span>, in that case you'll need to use {'\u00A0'}inside the span or HTML element.
{' '}将呈现一个空格，但在某些情况下，当您希望也呈现行高时，您希望在 HTML 元素内有一个没有其他文本的空格，即：<span style={{ lineHeight: '1em' }}>{' '}</span>，在这种情况下，您需要{'\u00A0'}在span 或 HTML 元素。
回答by unic
Try to use utf-8 nbsp, seem as simple space, but working good without extra code.
尝试使用 utf-8 nbsp，看似简单的空间，但无需额外代码即可运行良好。
For copy symbols: https://unicode-table.com/en/00A0/
对于复制符号：https: //unicode-table.com/en/00A0/
For generate texts automatically, use some typograf.
要自动生成文本，请使用一些排版。
回答by Hemadri Dasari
You can also use ES6 template literals i.e.,
您还可以使用 ES6 模板文字，即，
` <li></li>` or ` ${value}`
