Лучшая практика при добавлении пробелов в JSX


96

Я понимаю, как (и почему ) добавить пробел в 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
Вам не нужен дополнительный диапазон, React устранил давние проблемы с текстовыми узлами, и ваш второй пример в порядке
Доминик

1
Я не знаю, что существует определенная «лучшая практика» - конечно, вам не нужно все заключать в <span>теги, но я обычно просто следую общим правилам HTML, когда беспокоюсь о пустом пространстве.
arthurakay,

Ответы:


110

Поскольку у &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>

15

Вы можете использовать свойство css white-space и установить для него предварительный перенос на включающий элемент div.

div {
     white-space: pre-wrap;
}

Если контейнер гибкий, вам понадобится это решение.
Curtis

Это единственный не & nbsp; решение, которое сработало для меня!
Магнус

@Magnus Пожалуйста, дружище. Ни одно из решений этого ответа на самом деле не сработало для моего особого случая.
i_code

10

Вы можете добавить простой пробел со знаком кавычек: {" "}

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

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

В какой версии React это работает для вас? 15.6.2, похоже, игнорирует это.
smhg 08

1
@smhg йо. это не зависит от версии реакции. его особенность ecmascript, машинописный текст. Вы можете ввести свой шаблон в консоли Chrome, чтобы проверить, в порядке ли ваш шаблон. Проблема также может быть в ваших настройках babel.
Василий Гутник 08

1
Вы путаете шаблонные литералы с выражениями JSX. Чтобы добавить пробел через JSX, просто поместите строку, состоящую из одного символа пробела, в выражение JSX . Самый простой способ сделать это {' '}. Для этого вам не нужны шаблонные литералы, хотя они работают (и работают {" "}).
Дэн Даскалеску

да, это была немного сбивающая с толку опечатка - исправлено. В любом случае, я уверен, 99,9% людей здесь ищут литералы шаблонов :)
Василий Гутник

6

Я обычно использую &nbsp;

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

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

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

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


6
Я не могу представить на практике, что было бы с использованием 5 неразрывных пробелов, что типографически имеет смысл, но помимо этого случая на практике это неправильно. Если вы используете это для макета, вам следует вместо этого использовать CSS, а если вам нужно добавить пробел, но не требовать, чтобы он был неразрывным, есть много других пробелов, которые имеют более типографский смысл. См., Например, этот вопрос: stackoverflow.com/questions/8515365/…
guioconnor

2
@guioconnor попробуйте расширить свое воображение и подумайте о приложении-редакторе, например, vscode, и вы обнаружите, что это имеет полный типографский смысл: D.
Дэн

6

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

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

или же

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

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


4

Вам не нужно вставлять &nbsp;или оборачивать лишнее пространство <span/>. Просто используйте код объекта HTML для пространства -&#32;

Вставить обычное пространство как HTML-объект

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

Боковое примечание: сегодня я натолкнулся на это, так как более красивый нарушал мой код, форматируя объект пространства. Когда вы используете {""}, он работает в отдельной строке и не прерывается.
gorhawk

Я просто пришел, чтобы добавить это к своему собственному ответу. Вместо этого я проголосовал за вашу.
undefined

4

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

{" "} or {' '}

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

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

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

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

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

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

2

используйте {} или {`} или&nbsp; для создания пространства между элементом span и содержимым.

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

1
nbsp = неразрывный пробел, который отличается от обычного пробела в Unicode и ограничивает разрыв строки. Иногда это желательно, просто указывая, что это не эквивалентно другим вариантам.
Бени Чернявский-Паскин

0

Если цель состоит в том, чтобы разделить два элемента, вы можете использовать CSS, как показано ниже:

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

Это предлагает только визуальное, но не семантическое разделение. Если вы скопируете результат, вы все равно получите AB, но нет A B.
ΔO 'deltazero'
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.