为什么 JSX 将空格解析为子元素

Question

我刚刚意识到我可以像孩子一样在反应中传递空字符串。

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

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

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

我发现了一个Github 问题描述了这一点。该问题已关闭，因为这是预期行为。

我的问题是，类似的东西有什么用例？为什么这是一种预期行为？

Answer 1

空白是文本。文本是一个节点。这就是全部内容了。

该代码具有三个独立的空白节点：

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

有多少空白没有影响，或者有什么其他文本也没有影响。在这种情况下，重要的是存在三个不同的文本元素（由大括号分隔，它们恰好是空的，但仍然存在并为解析器描绘文本）。