Как избежать компрометации компонента JSX при рендеринге React.js?

Я выясню, что React.js будет конденсировать теги HTML-компонента JSX при рендеринге, можно ли это избежать?

Например, у меня есть компонент jsx, определенный таким образом:

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

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

И разница между конденсированным и неконденсированным кодом:

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

Может быть, это смешно и не имеет смысла это делать, но я все равно ценю любую помощь, спасибо!

Ответы

Ответ 1

Не забывайте, что JSX - это просто сахар для вызовов функций. Итак, это...

<div id="wrapper">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

... это просто сахар для этого:

React.createElement("div", { id: "wrapper" },
  React.createElement("span", null, "1"),
  React.createElement("span", null, "2"),
  React.createElement("span", null, "3")
);

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

<div id="wrapper">
  <span>1</span>{" "}
  <span>2</span>{" "}
  <span>3</span>
</div>

... или открыть новые элементы в одной строке с пробелом между ними (транспилер JSX уважает контент между элементами, а не строки, смежные с элементами):

<div id="wrapper">
  <span>1</span> <span>2</span> <span>3</span>
</div>

... оба из которых переводятся на это:

React.createElement("div", { id: "wrapper" },
  React.createElement("span", null, "1"),
  " ",
  React.createElement("span", null, "2"),
  " ",
  React.createElement("span", null, "3")
);

Ответ 2

Если это необходимо, вы можете использовать display: inline-block с боковым полем, равным ширине пробела:

#wrapper span {
  display: inline-block;
  margin-right: 0.28em;
}