在 React 中，为什么不能向空片段添加键（短语法）？

Question

我知道，在 React 中，你不能向空片段添加键：

// will result in an error
< key={'foo'} > 
 {...}
</>

相反，您需要使用React.Fragment：

// works fine
<React.Fragment key="foo">
   {...}
</React.Fragment>

React 文档注意到了这一点，但没有解释原因，我很好奇。这是 JSX 的限制吗？或者是 React 出于某种原因做出的设计决定？

编辑：我找到了这篇文章。听起来像是Fragment先出现，然后<>再出现（并被上游到 JSX）。但为什么他们不把它做成可以参数化的呢？只是对这个决定的背景以及是否有根本原因感到好奇，因为我不太了解 JSX。

Answer 1

这其实也是我心里的一个问题。在向提出关键片段拉取请求的人询问并窥探源代码之后，我想我有了答案。

我相信向简写语法添加键也很容易，因为它们以相同的方式进行协调。但是，如果我们要在简写语法中添加一个键，它会像这样：

<key="1">foo</>

现在这会导致很多混乱，key 是另一个标签吗？<key></key>如果没有，那么 JSX 添加另一个标签会怎样。这会引起更多混乱。这就是为什么所有简写语法都不支持属性。