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>
답변
끊기지  
않는 공백이 생기기 때문에 필요한 경우에만 사용해야합니다. 대부분의 경우 이것은 의도하지 않은 부작용이 있습니다.
이전 버전의 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 <span className="second-word-formatting">World!</span>
몇 주 후에 코드로 돌아 오면 여기서 수행하려는 작업을 정확하게 식별하기 쉽습니다.
답변
당신은 삽입 할 필요가 없습니다
또는 사용하여 여분의 공간을 포장 <span/>
. 공간에 HTML 엔티티 코드를 사용하십시오. 
HTML 엔티티로 일반 공간 삽입
<form>
<div>Full name:</span> 
<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 </span>
HTML 콘텐츠를 인쇄 할 때 dangerouslySetInnerHTML에서 & nbsp를 사용할 수도 있습니다.
<div dangerouslySetInnerHTML={{__html: 'sample html text: '}} />