React.js 渲染时如何避免 JSX 组件凝聚? [英] How to avoid JSX component from condensing when React.js rendering it?

问题描述

我发现 React.js 在渲染时会压缩 JSX 组件的 HTML 标签，是否可以避免这种情况?

比如我有一个jsx组件是这样定义的:

<span>1</span><span>2</span><span>3</span>

渲染后，以这种方式在浏览器中显示，浓缩:

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

我知道问这样的问题有点奇怪，但有时我只是希望组件按照我定义的方式呈现.

以及压缩代码和非压缩代码的区别:

非浓缩:

简写:

它们自然是相同的代码.虽然我知道非压缩代码与压缩代码的行为不同，因为它包含一些制表符或空白字符，但我们最初是这样定义它的.

也许这样做很荒谬而且毫无意义，但我仍然感谢您的帮助，谢谢！

解决方案

不要忘记 JSX 只是函数调用的糖.所以这...

<span>1</span><span>2</span><span>3</span>

...只是糖:

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

如果您希望出现在不同行的元素之间有空格，您可以手动添加一些……

<span>1</span>{" "}<span>2</span>{" "}<span>3</span>

...或者在同一行上打开新元素，它们之间有空格(JSX 转译器尊重元素之间的内容，而不是与元素相邻的换行符):

<span>1</span><span>2</span><span>3</span>

...两者都转化为:

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

I find out that React.js will condense JSX component HTML tags when rendering, is it possible to avoid this?

For example, I have a jsx component defined in this way:

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

after rendering, it show up in browser this way, condensed:

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

I know it is a bit strange for asking such question, but sometimes I just want the component to be rendered as the way I defined it.

And the difference between condensed and not-condensed code:

not-condensed:

condensed:

They are naturally the same code. Although I know that the not-condensed code acts differently from the condensed one because it contains some tab or blank characters, that is originally how we define it.

Maybe it is ridiculous and makes no sense to do this, but I still appreciate any help, thanks!

解决方案

Don’t forget that JSX is just sugar for function calls. So this...

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

...is just sugar for this:

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

If you want whitespace between elements which appear on different lines, you can either add some manually…

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

…or open new elements on the same line with whitespace between them (the JSX transpiler respects content between elements, just not linebreaks which are adjacent to elements):

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

…both of which transpile to this:

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

这篇关于React.js 渲染时如何避免 JSX 组件凝聚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！