为什么可汗学院使用空白空间的模板？

Question

在可汗学院的Perseus回购中，他们使用{' '}代替原始 。

这个目的是什么？

Answer 1

在JSX中，与HTML不同，换行符不算作空格。例如，在HTML中，为了显示一些彼此相邻但没有空格的图像，同时将它们放在HTML中的单独行中，您必须do something like

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>

在React中，可以使用

完成相同的布局

<p>
  <img src="." alt="" />
  <img src="." alt="" />
  <img src="." alt="" />
  <img src="." alt="" />
</p>

这意味着如果你做想要它们之间的空格，你必须自己声明它们;如果您想要一个不间断的空间，可以使用&nbsp，但如果您想要一个常规的空间，可以使用{' '}在JavaScript中指定它：

<p>
  <img src="." alt="" />{' '}
  <img src="." alt="" />{' '}
  <img src="." alt="" />{' '}
  <img src="." alt="" />
</p>

由于换行不算作空白，您也可以将其写为

<p>
  <img src="." alt="" />
  {' '}
  <img src="." alt="" />
  {' '}
  <img src="." alt="" />
  {' '}
  <img src="." alt="" />
</p>

当然，你也可以使用CSS为图像应用间距，但它目前很多harder to remove spacing via just CSS。