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

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

저는 자주 쓰는 편이에요. 

이 방법은 예쁘지는 않지만, 지금까지 발견한 것 중 가장 혼란스럽지 않은 방법으로, 얼마나 많은 공간을 추가할 수 있는지 절대적으로 제어할 수 있습니다.

공백 5개를 추가할 경우:

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

몇 주 후에 암호로 돌아오면 내가 여기서 뭘 하려는지 정확히 알 수 있어

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

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

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

공간에 큰따옴표와 작은따옴표가 있는 식과 같은 곱슬곱슬한 중괄호를 사용할 수 있습니다.

{" "} or {' '}

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

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

아래와 같이 &nbsp를 사용할 수도 있습니다(내부 범위).

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

위험하게 &nbsp를 사용할 수도 있습니다.SetInnerHTML 콘텐츠 인쇄 시 HTML

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

다른 행의 컴포넌트 옆에 텍스트를 배치할 때 사용할 수 있는 좋은 규칙을 생각해 보고 몇 가지 좋은 옵션을 찾았습니다.

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

또는

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

각 기능에 의해, 「」를 하지 않고, 가 됩니다.HTML 을 사용합니다. 또는 다른 관련 없는 마크업..{' '}html 할 수 .{' hello & goodbye '}지지않않않않

넣어도 요. 에 '여백'을 붙입니다.<span/> 엔티티 HTML 엔티티 코드를 사용합니다. 

HTML 엔티티로 일반 공간 삽입

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

또는 {} 또는 {''}을(를) 사용하여 스판 요소와 내용 사이에 공간을 만듭니다.

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

★★★★★★★★★★★★★★★를 사용해도 접근법입니다. 즉, 과 같은 방법을 합니다.<Fragment>HTML을 사용합니다.이 태그를 사용하면 JSX에서 사용할 커스텀 스페이서를 만들 수 있습니다.

★★★{ Fragment }

import { Fragment } from "react"

변수를 만듭니다.

const space = <Fragment>&nbsp;&nbsp;&nbsp;&nbsp;</Fragment>

주의: 다음 방법으로도 실행할 수 있습니다.<span><Fragment>

이렇게 쓰세요.

return ( 
  <div> some text here {space} and here... </div> 
)

2개의 요소를 분리하는 것을 목적으로 하는 경우 다음과 같이 CSS를 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/40264084/best-practice-when-adding-whitespace-in-jsx