React ref三种用法

注:默认情况下,不能在函数组件上使用 ref 属性,因为它们没有实例

如果要在函数组件中使用 ref,你可以使用  forwardRef(可与 useImperativeHandle 结合使用),或者可以将该组件转化为 class 组件。

第一种  React.createRef()


第二种 回调 Refs


el作为参数传给this.callbackRef

第三种 String 类型的 Refs(弃用)


新版本不推荐我们使用string类型的refs,建议用refs 的回调或createRef

总结:

1.ref是在dom元素上表示获取该dom的节点

2.ref实在组件上是获取该组件的实例

例如:

结果:

获取子组件dom:

好玩吧

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容