Найкраща практика додавання пробілів у 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 без додаткової  чи іншої сторонньої розмітки. Він створює менше текстових вузлів, ніж використання {' '}, і дозволяє використовувати HTML-сутності там, де {' hello & goodbye '}цього немає.

Ви можете використовувати фігурні дужки, як вираз, як з подвійними, так і з одинарними лапками для пробілу, тобто,

{" "} or {' '}

Ви також можете використовувати літерали шаблонів ES6, тобто,

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

Ви також можете використовувати & nbsp, як показано нижче (всередині прольоту)

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

Ви також можете використовувати & nbsp у nevarlySetInnerHTML під час друку HTML-вмісту

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

використовуйте {} або {``} або  для створення простору між елементом span та вмістом.

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

Якщо метою є розділити два елементи, ви можете використовувати CSS, як показано нижче:

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