React中的空格

对HTML中的空格很熟悉，却不能能在React组件中得到想要的结果？读一下本文吧。

最简单的学习方式大概就是通过例子学习了，让我们开始吧。

在这些示例中，HTML和JSX中的空格是一样的。没什么特别的，所以扫一眼我们继续。为了方便，•表示一个空格。

1	<div>Hello•World</div>

1	<div>•Hello•World</div>

1	<div>••Hello•World</div>

1	<div>•••Hello•World•••</div>

1	<div>Hello•••World</div>

记住虽然JSX在在HTML中渲染多个空格，但是浏览器仍然会压缩空格序列。（假定CSS的white-space属性是默认值：normal）。

所有的上述示例都在单行中。当我们使用多行时，JSX和HTML开始就有不同了。

现在开始有用的部分，这里JSX不会按照你输入的来渲染HTML。JSX代码在上，HTML代码在下。

新行被移除

1
2
3

<div>
••Hello•World
</div>

1	<div>Hello•World</div>

空行被移除

<div>
 
••Hello•World
</div>

1	<div>Hello•World</div>

开头和结尾处的空格被移除

<div>
••Hello•World•••
</div>
••<div>Hello•World</div>••

1 2	<div>Hello•World</div> <div>Hello•World</div>

空格转义字符可以被用来添加空格

1
2
3

<div>
  &nbsp;•Hello•World
</div>

1	<div>••Hello•World</div>

一般来说，在每一行的开头和结尾处的空格都会被移除，且新行也会被移除。

JSX不会在HTML中生成额外的无关的空格，能让我们更方便地写标签。