javascript - 为什么 JSX 将空格解析为子项

Question

我刚刚意识到我可以在 child 的 react 中传递空字符串。

function App() {
  return (
    <Comp> {} {} </Comp>
  );
}

这是从 React Developer Tools直接复制粘贴的结果.

{
  "children": [
    " ",
    " ",
    " "
  ]
}

我找到了 Github issue描述这个。该问题已关闭，因为这是预期的行为。
我的问题是，这样的用例是什么？为什么这是预期的行为？

Answer 1

空白是文本。文本是一个节点。这就是它的全部。
并且代码具有三个独立的空白节点:

<Comp> {} {} </Comp>
      ^--^--^--- here

有多少空白没有区别，或者有什么其他文本没有区别。在这种情况下，重要的是文本的三个不同元素(由花括号分隔，巧合的是，它们是空的，但仍然存在并为解析器描绘了文本)。