jsx가 작동하지 않습니다.

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

});

---

참조 : JSX In Depth

시험: Select Scenario:{'\u00A0'}

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

또는: <div>&nbsp;</div>

jsfiddle

최신 정보

댓글 중 일부를 확인하고 시도한 후. JSX 내부에서 html entites를 사용하는 것이 잘 작동한다는 사실에 주목했습니다 (위의 jsx-gotchas 참조 [아마도 구식 임]에 명시된 것과는 달리).

따라서 다음과 같이 사용하면 R&D'R & D'가 출력됩니다. 에 이상한 동작  이있어 다르게 렌더링되어 작동하지 않는다고 생각하게됩니다.

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

이럴거야

Select Takeout Scenario:{' '}

작동합니다.

As Advice you should not use &nbsp to add extra space, you can use css to achieve same.

---

{'\u00A0'} works but is hard to read, so I wrapped it in a function component:

components/nbsp.js:

export default () => '\u00A0';

usage:

Hello<Nbsp />world

---

If this doesn't work for you {' '} then use {'\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.

---

You can also use ES6 template literals i.e.,

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

참고URL : https://stackoverflow.com/questions/37909134/nbsp-jsx-not-working