JSX에 공백을 추가 할 때 모범 사례

JSX에 공백을 추가하는 방법 (및 이유 )을 이해 하지만 모범 사례가 무엇인지 또는 실제 차이가 있는지 궁금합니다.

두 요소를 범위로 래핑

<div className="top-element-formatting">
  <span>Hello </span>
  <span className="second-word-formatting">World!</span>
</div>

한 줄에 추가

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
  </div>

JS로 공간 추가

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

끊기지 &nbsp않는 공백이 생기기 때문에 필요한 경우에만 사용해야합니다. 대부분의 경우 이것은 의도하지 않은 부작용이 있습니다.

이전 버전의 React, v14 이전의 모든 버전은 <span> </span>태그 안에 개행 문자가있을 때 자동으로 삽입 될 것이라고 생각합니다 .

더 이상이 작업을 수행하지 않지만 자신의 코드에서이를 처리하는 안전한 방법입니다. 특별히 목표로하는 스타일링이 없다면 span(일반적으로 나쁜 습관), 이것이 가장 안전한 경로입니다.

귀하의 예에 따라 매우 짧기 때문에 한 줄에 함께 넣을 수 있습니다. 더 긴 시나리오에서는 다음과 같이해야합니다.

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    <span> </span>
    So much more text in this box that it really needs to be on another line.
  </div>

이 방법은 텍스트 편집기 자동 트리밍에도 안전합니다.

다른 방법은 {' '}임의의 HTML 태그를 삽입하지 않는 사용 입니다. 이것은 스타일을 지정하고, 요소를 강조 표시하고, DOM에서 혼란을 제거 할 때 더 유용 할 수 있습니다. React v14 또는 이전 버전과의 하위 호환성이 필요하지 않은 경우 선호하는 방법입니다.

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    {' '}
    So much more text in this box that it really needs to be on another line.
  </div>

css 속성 공백을 사용하고 둘러싸는 div 요소에 미리 래핑하도록 설정할 수 있습니다.

div {
     white-space: pre-wrap;
}

따옴표로 간단한 공백을 추가 할 수 있습니다. {" "}

또한 삽입 된 표현식 (중괄호 안의 코드)을 삽입 할 수있는 템플릿 리터럴을 사용할 수 있습니다 .

`${2 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.

나는 사용하는 경향이 있습니다  

예쁘지는 않지만 내가 찾은 공백을 추가하는 가장 혼란스러운 방법이며 추가하는 공백의 양을 절대적으로 제어 할 수 있습니다.

5 개의 공백을 추가하려면 :

Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="second-word-formatting">World!</span>

몇 주 후에 코드로 돌아 오면 여기서 수행하려는 작업을 정확하게 식별하기 쉽습니다.

당신은 삽입 할 필요가 없습니다  또는 사용하여 여분의 공간을 포장 <span/>. 공간에 HTML 엔티티 코드를 사용하십시오. 

HTML 엔티티로 일반 공간 삽입

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>

다른 줄의 구성 요소 옆에 텍스트를 배치 할 때 사용할 좋은 규칙을 생각하고 몇 가지 좋은 옵션을 찾았습니다.

<p>
    Hello {
        <span>World</span>
    }!
</p>

또는

<p>
    Hello {}
    <span>World</span>
    {} again!
</p>

이들 각각은 추가  또는 기타 관련없는 마크 업 없이 깨끗한 html을 생성합니다 . 사용하는 것보다 적은 수의 텍스트 노드를 생성 {' '}하고 {' hello & goodbye '}그렇지 않은 경우 html 엔티티를 사용할 수 있습니다 .

공백에 대해 큰 따옴표와 작은 따옴표가 모두있는 expression과 같은 중괄호를 사용할 수 있습니다.

{" "} or {' '}

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

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

아래처럼 & nbsp를 사용할 수도 있습니다 (범위 내).

<span>sample text &nbsp; </span>

HTML 콘텐츠를 인쇄 할 때 dangerouslySetInnerHTML에서 & nbsp를 사용할 수도 있습니다.

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} />

용도 {} 또는 {} 또는`  스팬 엘리먼트와 콘텐츠 사이의 공간을 만들기 위해.

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>

두 요소를 분리하는 것이 목표 인 경우 아래와 같이 CSS를 사용할 수 있습니다.

A<span style={{paddingLeft: '20px'}}>B</span>