React Refs的讨论
Posted tolivetolearn
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Refs的讨论相关的知识,希望对你有一定的参考价值。
一、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的讨论的主要内容,如果未能解决你的问题,请参考以下文章
每天30s系列|介绍 React 中的 Refs 及其使用场景?
[OHIF-Viewers]医疗数字阅片-医学影像-REACT-React.createRef()-Refs and the DOM关于回调 refs 的说明