码迷,mamicode.com
首页 > 其他好文 > 详细

React Refs的讨论

时间:2020-04-17 22:07:02      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:fun   通过   使用   enc   The   实例   没有   react   cti   

一、Refs的作用

通过Refs,可以访问到

1. DOM节点。

2. render方法中创建的React元素。(class组件的实例)

二、访问节点或者实例有什么用呢?为什么要使用Refs来访问呢?

访问节点或者实例的需求场景:

  • 管理焦点,文本选择或媒体播放。
  • 触发强制动画。
  • 集成第三方 DOM 库

因为有些场景,在React中,不使用Refs就无法解决。

三、零碎知识点

1. Refs可以在DOM元素或者class组件上使用。但是不可以在function组件上使用。这是因为function组件没有实例。

2. 想要传递ref给function组件内的DOM元素或者class组件,则可以通过使用forwardRef来实现。

3. 通过useImperativeHandle可以使function组件的父组件获得该组件子组件中DOM元素或者class组件的操作方法。

 

参考资料:

[1] React.Refs and the DOM.https://reactjs.bootcss.com/docs/refs-and-the-dom.html

[2] React.Refs转发.https://reactjs.bootcss.com/docs/forwarding-refs.html

[3] React.useImperativeHandle.https://reactjs.bootcss.com/docs/hooks-reference.html#useimperativehandle

 

React Refs的讨论

标签:fun   通过   使用   enc   The   实例   没有   react   cti   

原文地址:https://www.cnblogs.com/toLivetoLearn/p/12722641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!