Najlepsza praktyka podczas dodawania białych znaków w JSX

Rozumiem, jak (i dlaczego ) dodać spacje w JSX, ale zastanawiam się, jaka jest najlepsza praktyka lub czy coś robi jakąkolwiek różnicę?

Owiń oba elementy w rozpiętość

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

Dodaj je w jednej linii

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

Dodaj przestrzeń za pomocą JS

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

Ponieważ &nbsppowoduje, że masz nierozdzielające spacje, powinieneś ich używać tylko w razie potrzeby. W większości przypadków będzie to miało niezamierzone skutki uboczne.

Starsze wersje Reacta, wierzę, że wszystkie te przed wersją 14 były automatycznie wstawiane, <span> </span>gdy w tagu znajdował się znak nowej linii.

Chociaż już tego nie robią, jest to bezpieczny sposób na poradzenie sobie z tym we własnym kodzie. O ile nie masz stylu, który jest konkretnie ukierunkowany span(ogólnie zła praktyka), jest to najbezpieczniejsza trasa.

Na twoim przykładzie możesz umieścić je razem w jednym wierszu, ponieważ jest dość krótki. W dłuższych scenariuszach prawdopodobnie powinieneś to zrobić:

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

Ta metoda jest również bezpieczna przed automatycznym przycinaniem edytorów tekstu.

Inną metodą jest użycie, {' '}która nie wstawia losowych tagów HTML. Może to być bardziej przydatne podczas stylizacji, podświetlania elementów i usuwania bałaganu z DOM. Jeśli nie potrzebujesz wstecznej kompatybilności z React v14 lub wcześniejszym, powinna to być Twoja preferowana metoda.

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

Można użyć odstępu we właściwości css i ustawić wstępne zawijanie do otaczającego elementu div.

div {
     white-space: pre-wrap;
}

Możesz dodać prostą spację ze znakiem cudzysłowu: {" "}

Możesz również użyć literałów szablonów , które pozwalają wstawiać, osadzone wyrażenia (kod w nawiasach klamrowych):

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

Zwykle używam  

Nie jest ładna, ale jest to najmniej mylący sposób dodawania białych znaków, jaki znalazłem, i daje mi całkowitą kontrolę nad tym, ile białych znaków dodaję.

Jeśli chcę dodać 5 spacji:

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

Łatwo jest dokładnie określić, co próbuję tutaj zrobić, gdy wrócę do kodu po tygodniach.

Nie musisz wstawiać  ani zawijać dodatkowej przestrzeni <span/>. Po prostu użyj kodu encji HTML dla spacji - 

Wstaw zwykłą spację jako jednostkę HTML

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

Próbowałem wymyślić dobrą konwencję do umieszczania tekstu obok komponentów w różnych wierszach i znalazłem kilka dobrych opcji:

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

lub

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

Każdy z nich tworzy czysty kod HTML bez dodatkowych  lub innych zewnętrznych znaczników. Tworzy mniej węzłów tekstowych niż używanie {' '}i pozwala na używanie encji html tam, gdzie {' hello & goodbye '}nie ma.

Możesz używać nawiasów klamrowych, takich jak wyrażenie z podwójnymi cudzysłowami i pojedynczymi cudzysłowami dla spacji, np.

{" "} or {' '}

Możesz także użyć literałów szablonów ES6, np.

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

Możesz także użyć & nbsp jak poniżej (wewnątrz zakresu)

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

Podczas drukowania treści html możesz też użyć & nbsp in dangerousouslySetInnerHTML

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

użyj {} lub {``} lub  aby utworzyć odstęp między elementem span a treścią.

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

Jeśli celem jest rozdzielenie dwóch elementów, możesz użyć CSS jak poniżej:

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