在不同的基于虚拟 DOM 的 UI 库(React、Inferno、Preact 等)中处理 "ref" 和 "key"
Handling of "ref" and "key" in different virtual-DOM-based UI libraries (React, Inferno, Preact, etc.)
调用后
<MyComponent x="aaa" y="bbb" key="0" ref={someRef}/>
props
对象是
{ x: 'aaa', y: 'bbb' }
在 React 和 Inferno 中,但它是
{ x: 'aaa', y: 'bbb', key: '0', ref: someRef }
在 Preact 中。
是否有人知道这些不同设计决策的原因以及每个解决方案的一些优点和缺点?
此答案摘自React GitHub Issues
The reason is that the concept of a key is something that is controlled by React internals before your component gets created. The same thing for refs.
You can think about an array of ReactElements
as a Map.
A Map is a series of key
and value
tuples. A React fragment is a series of key
and props
tuples (and also type
and ref
). The key is designed to decide what the value is in each slot, but not the actual value itself.
If you're reading a prop named key
you might be overloading the meaning of key
or accidentally using it for something unrelated.
This change makes the concept a bit more strict. This helps avoids bugs with transferring props to another component which shouldn't bring the key and ref along with it. It also helps performance by ensure that types in React internals are consistent and stable.
I would suggest renaming or duplicating the prop name as a possible fix if you really need to access it.
免责声明:我从事 preact。
将 key
和 ref
属性同时传递到组件中是我们为即将发布的主要版本修复的一个错误。 alpha 计划于 2019 年 3 月 4 日登陆。
甚至还有一个 open RFC 可以通过 props
再次传递 ref
。我们非常支持这一变化,因为这会使 forwardRef
变得多余。
调用后
<MyComponent x="aaa" y="bbb" key="0" ref={someRef}/>
props
对象是
{ x: 'aaa', y: 'bbb' }
在 React 和 Inferno 中,但它是
{ x: 'aaa', y: 'bbb', key: '0', ref: someRef }
在 Preact 中。
是否有人知道这些不同设计决策的原因以及每个解决方案的一些优点和缺点?
此答案摘自React GitHub Issues
The reason is that the concept of a key is something that is controlled by React internals before your component gets created. The same thing for refs. You can think about an array of
ReactElements
as a Map.A Map is a series of
key
andvalue
tuples. A React fragment is a series ofkey
andprops
tuples (and alsotype
andref
). The key is designed to decide what the value is in each slot, but not the actual value itself.If you're reading a prop named
key
you might be overloading the meaning ofkey
or accidentally using it for something unrelated.This change makes the concept a bit more strict. This helps avoids bugs with transferring props to another component which shouldn't bring the key and ref along with it. It also helps performance by ensure that types in React internals are consistent and stable.
I would suggest renaming or duplicating the prop name as a possible fix if you really need to access it.
免责声明:我从事 preact。
将 key
和 ref
属性同时传递到组件中是我们为即将发布的主要版本修复的一个错误。 alpha 计划于 2019 年 3 月 4 日登陆。
甚至还有一个 open RFC 可以通过 props
再次传递 ref
。我们非常支持这一变化,因为这会使 forwardRef
变得多余。