我知道,在Reaction中,您不能向空片段添加密钥:

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

相反,您需要使用React.Fragment:

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

React documentation注意到了这一点,但它不能解释why,我很好奇.这是JSX中的一个限制吗?或者这是出于某种原因而做出的设计决定?

编辑:我找到了this post个.这听起来像是Fragment排在第一位,然后<>紧随其后(最后流向了JSX).但为什么他们不把它做出来,这样它就可以被参数化了?我只是好奇这个决定的背景,以及是否有潜在的原因,因为我对JSX不是很了解.

推荐答案

这其实也是我心中的一个问题.在询问了提出提取关键片段请求的人,并窥探了源代码之后,我想我得到了答案.

我相信在速记语法中添加一个关键字也很容易,因为它们是以相同的方式协调的.但是,如果我们要在速记语法中添加一个键,则如下所示:

<key="1">foo</>

这导致了很多混淆,Key是另一个标签吗?如果不是,那么如果JSX再增加<key></key>个标记呢?这将引发更多的困惑.这就是为什么所有速记语法都不支持属性的原因.

The tradeoff for adding a key attribute is simply too high

Reactjs相关问答推荐

ReferenceError:未在Redux组件中定义窗口

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

react 路由GUGUD Use Effect无法通过useNavigate正常工作

Redux Store未触发React组件中的重新呈现

状态改变不会触发重新渲染

如何垂直对齐 React Bootstrap Table 行中的项目

Symfony ux-react:使用react_component()时React组件不会渲染

React 无效的钩子调用:如何避免嵌套钩子?

如何管理可重用无线电输入的 React 状态?

React - 如何重定向页面以显示数据修改?

Stripe Checkout:是否可以创建不自动续订的订阅?

FlatList 不在 React Native 中呈现项目

我正在try 使用 cypress 测试我的下拉列表,它 Select 值但不提交它们(手动工作)

React Native map 中的初始zoom 级别

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

如何使用 UseState 正确测试组件

如何在 Cypress E2E 的站点上测试react 组件?

未捕获的错误:操作必须是使用 redux/toolkit 的普通对象

如何不旋转 mui 自动完成弹出图标?

react 路由:router.ts:11 没有匹配的路由位置/管理