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를 참조하십시오.

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

또는 다음 중 하나를 선택합니다.<div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

또는 다음 중 하나를 선택합니다.<div>&nbsp;</div>

jsfiddle

갱신하다

댓글 몇 개 보고 한 번 써보고.위의 jsx-gotchas 참조에 기재되어 있는 것과 달리 JSX 내에서 html 엔티트를 사용하면 문제가 없다는 것을 알게 되었습니다.

예를 들어 다음과 같은 것을 사용합니다.R&D, 출력: 'R&D'입니다.에는 이상한 행동이 있다. 그 때문에, 다른 렌더링이 되어, 동작하지 않는다고 생각하게 됩니다.

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

작성:

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

{'\u00A0'}동작하지만 읽기 어렵기 때문에 기능 컴포넌트로 포장했습니다.

컴포넌트/nbsp.syslog:

export default () => '\u00A0';

사용방법:

Hello<Nbsp />world

당신의 글을 쓰세요jsx로 둘러싸인 코드{ }아래 그림과 같이

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

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

예: 고객님의 경우

Select Takeout Scenario: 

이래야 한다

Select Takeout Scenario:{' '}

그건 작동할 것이다.

사용해서는 안 되는 어드바랍니다.&nbspcss를 사용하여 공간을 추가할 수 있습니다.

간단하게 포장할 수 있습니다.Fragment:

<Fragment>&nbsp;</Fragment>

이 방법이 여의치 않으면{' '}그 후{'\u00A0'}.

{' '}공백이 표시되지만 HTML 요소 내에 다른 텍스트가 없는 공백이 필요한 경우 줄 높이도 렌더링해야 할 경우가 있습니다.<span style={{ lineHeight: '1em' }}>{' '}</span>이 경우 를 사용해야 합니다.{'\u00A0'}span 요소 또는 HTML 요소 내에 있습니다.

utf-8 nbsp를 사용해 보십시오.간단한 공간처럼 보이지만 별도의 코드 없이 잘 작동합니다.

이 경우 변수를 생성해야 합니다.

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

텍스트를 자동으로 생성하려면 몇 가지 타이포그라프를 사용하십시오.

나는 사용했다 <span>&nbsp;</span> 그리고 그것은 성공하였다.

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

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

언급URL : https://stackoverflow.com/questions/37909134/nbsp-jsx-not-working