javascript - 为什么可汗学院使用只有空白的模板？

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>

这意味着，如果您确实希望它们之间有空格，则必须自己声明它们；如果您想要不间断空格，则可以使用  ，但如果您想要常规的中断空格，则可以使用 {' '} 在 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 .