Лучшая практика при добавлении пробелов в 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>

Ответ 1

Потому что &nbsp заставляет вас иметь неразрывные пробелы, вы должны использовать его только там, где это необходимо. В большинстве случаев это будет иметь непреднамеренные побочные эффекты.

Старые версии React, я считаю, что все те, что были до v14, автоматически вставляют  , когда у вас была новая строка внутри тега.

Пока они больше не делают этого, это безопасный способ справиться с этим в вашем собственном коде. Если у вас нет стиля, который специально нацелен на 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>

Ответ 2

Вы можете использовать шаблонные литералы:

{` `} // Notice this sign " ` ",its not normal quotes.

Мы можем использовать литералы с выражениями (код внутри фигурных скобок):

`${2 * a + b}.?!=-`

Ответ 3

Я стараюсь использовать  

Это не очень, но это наименее запутанный способ добавить пробел, который я нашел, и он дает мне абсолютный контроль над тем, сколько я добавляю пробелы.

Если я хочу добавить 5 пробелов:

Hello     World!

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

Ответ 4

Вам не нужно вставлять   или оберните дополнительное пространство с помощью . Просто используйте код сущности HTML для пробела -  

Вставить регулярное пространство как HTML-объект

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

Ответ 5

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

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

или

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

Каждый из них производит чистый HTML без дополнительной   или другой посторонней разметки. Он создает меньше текстовых узлов, чем при использовании {' '}, и позволяет использовать html-объекты, а не {' hello & goodbye '}.

Ответ 6

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

{" "} or {' '}

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

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

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

<span>sample text &nbsp; <span>

Вы также можете использовать & nbsp в опасномSetInnerHTML при печати содержимого html

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

Ответ 7

использовать {} или {''} или   для создания пространства между элементом span и контентом.

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

Ответ 8

Вы можете использовать свойство css пробел и установить для него предварительную переносимость в элемент div.

div {
     white-space: pre-wrap;
}