英文:
Why does React.createPortal allow key like list items, whereas other things like <Suspense> doesn't?
问题
我已经看到在ReactJs中有一些API允许使用_keys_，例如<React.Fragment>，但与此同时<React.Suspense>没有keys。
现在具体为什么React.createPortal允许像列表项一样使用key呢？
我的研究：我在SO或谷歌上没有找到太多信息，但我在github上找到了一次讨论，这似乎暗示_keys_是在2023年4月18日之后添加到文档中的。
英文:
I have seen some apis in ReactJs to allow keys, e.g. <React.Fragment>, but at the same time <React.Suspense> doesn't have keys.
Now specifically why does React.createPortal allow key like list items?
My research: I didn't find much on SO or google, but I found one discussion on github, which seem to imply that keys were added in the documentation after 18 April 2023.
答案1
得分: 2
的确，我发现当前的React文档在某些方面有点不够详细。
我也无法在JSX元素中找到关于key属性的明确说明（我无法证明不存在任何内容，所以如果我错过了，请原谅我，并随时评论）。
React.createElement()
更新于2023年7月19日：
关于createElement()的这一部分可能已经过时了。
JSX语法显然不再转换为createElement（React v18），而是转换为内部的jsx()函数调用，我相信这个函数不应该由开发者调用，它可能在/src/jsx/ReactJSXElement.js中定义：
以前的答案：
无论如何，知道**JSX被转换为React.createElement(...)**调用（令我惊讶的是，在“Legacy React APIs”下提到了这一点），我可以看到传递给createElement的props将以特殊方式处理props.key属性：
> 请注意，props对象中的ref和key是特殊的，不会作为返回的element的element.props.ref和element.props.key可用。它们将作为element.ref和element.key可用。
还请注意以前的createElement文档：
> 使用JSX编写的代码将被转换为使用React.createElement()。
推断
这是关于createElement的一个通用陈述，所以每个由createElement创建的元素都应该允许key属性。
假设仍然成立，每个JSX元素都是一个createElement调用，就像过去一样（“legacy”这个词可能会改变），这意味着每个JSX元素都接受key属性。
所以对我来说，每个JSX元素都接受key，但我认为应该更明确地说明。
<React.Fragment>
我猜测文档之所以明确提到<React.Fragment>中的key，是因为如何向片段添加key是一个常见问题，因为片段更常用的是使用空括号语法<>编写的，其中不能添加任何属性。但这只是我的猜测。
React.createPortal()
React.createPortal()不同，因为它不是JSX语法，所以它需要特定的文档。
渲染列表
“渲染列表”部分提到了key属性，但我认为这还不足以回答你的问题。
它仅关注“列表项”/“集合”/“数组”中的键，并没有提到key属性的一般情况。
英文:
Indeed, I find the current React documentation a little thin in some areas myself.
I also can't find an explicit statement regarding the key property in JSX elements there (I can't prove the non-existence of anything, so forgive me if I missed it and feel free to comment).
React.createElement()
UPDATE 2023-07-19:
This section about createElement() is probably outdated.
JSX syntax is apparently not converted to createElement anymore (React v18), but instead to a call to an internal jsx() function, which seems not to be supposed to be called by the developer, I believe defined in /src/jsx/ReactJSXElement.js:
Previous answer:
Anyway, knowing that JSX is converted to React.createElement(...) calls (which, to my surprise, is mentioned under "Legacy React APIs"), I can see that props passed to createElement will handle a props.key property in a special way:
> Note that ref and key from your props object are special and will not be available as element.props.ref and element.props.key on the returned element. They will be available as element.ref and element.key.
Also note the legacy createElement documentation:
> Code written with JSX will be converted to use React.createElement().
Deduction
That is a general statement about createElement, so
every element created by createElement should allow the key property.
Assuming that it is still true that every JSX element is a createElement call, as it was in the past (the word "legacy" suggests it might change), this implies that every JSX element accepts a key prop.
So it seems "clear" to me that every JSX element accepts a key, but in my opinion it should be stated more explicitly.
<React.Fragment>
I guess that the documentation mentions key in <React.Fragment> explicitly,
because it's a common question how to add a key to a fragment, because a fragment is more commonly written using the empty-brackets-syntax <>, where you can not add any properties. But that's just a guess.
React.createPortal()
React.createPortal() is different, because it is not JSX syntax, so it needs a specific documentation.
Rendering Lists
The section "Rendering Lists" mentions key properties, but I find this not sufficient to answer your question.
It is solely focused on keys in "list items" / "collections" / "arrays", and doesn't say anything about the key property in general.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论