当你将ref传递给一个类组件时,它会指向(通过ref.current)实际的类示例。(参见遗留React文档中的“引用引用”。)这让你可以访问该示例的字段。但是函数组件没有 * 示例或字段,所以ref没有指向的东西,也没有它可以使用的东西。 forwardRef仍然不允许ref指向示例,因为示例仍然不存在。相反,forwardRef允许您将引用“转发”到另一个对象:嵌套组件(通常是DOM元素)或您定义的自定义对象(使用useImperativeHandle)。 如果React现在从头开始设计,ref可能会有一些不同,但由于它的历史-因为它对类组件有特殊的意义-ref被保留了下来。 但是,您可以使用另一个prop名称(如innerRef)并将其用于转发,如Why, exactly, do we need React.forwardRef?所述。
3条答案
按热度按时间doinxwow1#
当你将
ref
传递给一个类组件时,它会指向(通过ref.current
)实际的类示例。(参见遗留React文档中的“引用引用”。)这让你可以访问该示例的字段。但是函数组件没有 * 示例或字段,所以ref
没有指向的东西,也没有它可以使用的东西。forwardRef
仍然不允许ref
指向示例,因为示例仍然不存在。相反,forwardRef
允许您将引用“转发”到另一个对象:嵌套组件(通常是DOM元素)或您定义的自定义对象(使用useImperativeHandle
)。如果React现在从头开始设计,
ref
可能会有一些不同,但由于它的历史-因为它对类组件有特殊的意义-ref
被保留了下来。但是,您可以使用另一个prop名称(如
innerRef
)并将其用于转发,如Why, exactly, do we need React.forwardRef?所述。sh7euo9m2#
我在谷歌上搜索了同样的问题:为什么不能像React中的props一样传递ref?我在React文档中找到了答案:
上面的例子有一个警告:refs不会被传递。这是因为ref不是一个prop。就像key一样,React对它的处理方式不同。如果你向HOC添加一个ref,ref将引用最外面的容器组件,而不是被 Package 的组件。
https://reactjs.org/docs/forwarding-refs.html
我希望那能给给予你一个满意的答案!
2lpgd9683#
因为,这对函数组件没有多大意义,因为它们没有
this
。另一方面,在类组件上使用ref
本质上是将refObj.current
绑定到类的示例(this
)本身,并访问公共字段和方法,但不能访问该类的静态属性/方法。为了详细说明这一点,考虑以下示例:个字符
我假设,React内部将
ref
属性绑定到class的示例。所以当它在函数组件上遇到ref
时,babel可能会检查它是基于类的(示例)组件还是函数组件。