& nbsp jsx无法正常工作 [英] &nbsp jsx not working

问题描述

我在jsx中使用了& nbsp标记，并且没有渲染空间。

  var Reporting = React.createClass（{
 
 render：function（）{
 return（
< div style = {divPositionReporting}> 
< p>定价报告< / p> 
< hr> ;< / hr> 
选择场景：& nbsp;& nbsp; 
< select> 
< option>< / option> 
< / select> ; 
< button type =button>获取定价报表< /按钮> 
< br /> 
选择外卖方案：& nbsp; 
<选择> 
< option>< / option> 
< / select> 
< / button> 
< button type =button>获取定价报告< / button> 
< ; 
< / div> 
）; 
}，
 
}）; 
  

解决方案

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

尝试：
选择方案：{'\\\ '}

或
< div dangerouslySetInnerHTML = {{__ html：'Select Scenario：& nbsp;'}} />

或
< div>& nbsp;< / div>

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

更新

看完一些评论后，尝试一下。它引起了我的注意，在JSX内部使用html entites可以正常工作（与上述jsx-gotchas参考文献[可能已经过时]所述的不同）。

例如： R& D ，会输出：'R& D'。
在& nbsp; 中存在一个奇怪的行为，这会导致它呈现不同的样式，因此导致我认为它不起作用：

 < div>这个工作原理简单： - & nbsp;  - < / div> 
< div>这个工作原理简单： -  {'\\\ '}  - < / div> 
  

产生：

 这个工作原理很简单： -   -  
这个工作很简单： -   -  
  

I am using the &nbsp tag in jsx and it is not rendering the space. The following is a small snippet of my code.Please help.

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

});

解决方案

See: https://facebook.github.io/react/docs/jsx-gotchas.html

Try: Select Scenario:{'\u00A0'}

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

Or: <div>&nbsp;</div>

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

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]).

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:

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

Produces:

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

这篇关于& nbsp jsx无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！