Лучшая практика при добавлении пробелов в 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 white-space и установить для него предварительный перенос на включающий элемент 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>

Когда через несколько недель я вернусь к коду, легко определить, что именно я здесь пытаюсь сделать.

Я пытался придумать хорошее соглашение, которое можно было бы использовать при размещении текста рядом с компонентами в разных строках, и нашел пару хороших вариантов:

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

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

{" "} or {' '}

Вы также можете использовать литералы шаблонов ES6, т.е.

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

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

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

Вы также можете использовать & nbsp в dangerousSetInnerHTML при печати содержимого 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>