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

});

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

{'\u00A0'}작동하지만 읽기 어렵 기 때문에 함수 구성 요소로 래핑했습니다 .

구성 요소 /nbsp.js :

export default () => '\u00A0';

용법:

Hello<Nbsp />world

아래와 같이 jsx코드를 래핑 하여 작성하십시오 { }.

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

여기에 공백이나 특수 문자를 넣을 수 있습니다.

예 : 귀하의 경우

Select Takeout Scenario: 

이럴거야

Select Takeout Scenario:{' '}

작동합니다.

조언으로 &nbsp추가 공간을 추가 하는 데 사용해서는 안되며 CSS 를 사용 하여 동일한 결과를 얻을 수 있습니다 .

이 당신을 위해 작동하지 않는 경우 {' '}다음 사용합니다 {'\u00A0'}.

{' '}공백을 렌더링하지만 다른 텍스트가없는 HTML 요소 내부에 공백이 필요한 경우에도 행 높이를 렌더링하려는 경우가 있습니다. 즉 <span style={{ lineHeight: '1em' }}>{' '}</span>,이 경우 {'\u00A0'}내부에서 사용해야 합니다. 스팬 또는 HTML 요소.

utf-8 nbsp를 사용하십시오. 단순한 공간처럼 보이지만 추가 코드없이 잘 작동합니다.

아마도 이것에 대한 변수를 만들어야 할 것입니다.

복사 기호 : https://unicode-table.com/en/00A0/

텍스트를 자동으로 생성하려면 일부 typograf를 사용하십시오.

ES6 템플릿 리터럴을 사용할 수도 있습니다.

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