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

91

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>
Jan Swart
źródło
1
Nie potrzebujesz dodatkowego zakresu, React naprawił długotrwałe problemy z węzłami tekstowymi, a twój drugi przykład jest w porządku
Dominic
1
Nie wiem, czy istnieje zdefiniowana „najlepsza praktyka” - na pewno nie musisz zawijać wszystkiego w <span>tagi, ale generalnie po prostu przestrzegam ogólnych praktyk HTML, gdy martwię się o białe znaki.
arthurakay

Odpowiedzi:

104

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>
Kevin Ghadyani
źródło
10

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;
}
i_code
źródło
Jeśli kontener jest elastyczny, będziesz potrzebować tego rozwiązania.
Curtis,
To jest jedyny nie & nbsp; rozwiązanie, które zadziałało dla mnie!
Magnus
@Magnus Nie ma za co, mój człowieku. Żadne z rozwiązań tej odpowiedzi nie działało w moim szczególnym przypadku.
i_code
10

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.
Wasyl Gutnyk
źródło
W jakiej wersji React to działa dla Ciebie? 15.6.2 wydaje się to ignorować.
smhg
1
@smhg yo. nie zależy od wersji reagowania. jego cecha ekmaskryptu, maszynopisu. Możesz wpisać swój szablon w konsoli Chrome, aby sprawdzić, czy Twój szablon jest w porządku. Problem może również dotyczyć ustawień Babel.
Wasyl Gutnik
1
Mylisz literały szablonów z wyrażeniami JSX. Aby dodać spację przez JSX, po prostu umieść ciąg składający się z jednego znaku spacji w wyrażeniu JSX . Najłatwiej to zrobić {' '}. Nie potrzebujesz do tego literałów szablonów, chociaż działają (i tak działają {" "}).
Dan Dascalescu
tak, to była trochę zagmatwana literówka - poprawiona. W każdym razie jestem pewien, że 99,9% ludzi tutaj szuka literałów szablonów :)
Wasyl Gutnyk
6

Zwykle używam &nbsp;

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.

Daniel Murawsky
źródło
6
Nie wyobrażam sobie w praktyce, jakie byłoby użycie 5 nierozdzielających spacji, które typograficznie ma sens, ale poza takim przypadkiem jest to niewłaściwe w praktyce. Jeśli używasz tego do układu, powinieneś zamiast tego użyć CSS, a jeśli chcesz dodać spację, ale nie wymaga, aby była nierozłamująca, jest wiele innych miejsc, które mają większy sens typograficzny. Zobacz to pytanie, na przykład: stackoverflow.com/questions/8515365/…
guioconnor
1
@guioconnor spróbuj poszerzyć swoją wyobraźnię i pomyśl o aplikacji edytora, np. vscode, a przekonasz się, że ma ona pełny sens typograficzny: D.
Dan
5

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

Wstaw zwykłą spację jako jednostkę HTML

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>
Andrey Ivlev
źródło
Uwaga dodatkowa: dzisiaj natknąłem się na to, ponieważ ładniejsze było łamanie mojego kodu przez formatowanie jednostki spacji. Kiedy używasz {""}, działa on sam w wierszu i nie psuje się.
gorhawk,
Właśnie szedłem, aby dodać to do mojej własnej odpowiedzi. Zamiast tego zagłosowałem za twoją.
undefined
5

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 &nbsp;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 &amp; goodbye '}nie ma.

nieokreślony
źródło
3

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;'}} />
Hemadri Dasari
źródło
2

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

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>
KARTHIKEYAN.A
źródło
1
nbsp = nierozerwalna spacja, która jest innym znakiem Unicode niż zwykła spacja i ogranicza łamanie linii. Czasami jest to pożądane, po prostu wskazując, że nie jest to równoważne z innymi opcjami.
Beni Cherniavsky-Paskin
1

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

A<span style={{paddingLeft: '20px'}}>B</span>
vcycyv
źródło