- 在函数组件中获取真实的
dom元素对象或者是组件对象。 - 使用步骤
1、导入useRef函数
2、执行useRef函数并传入null，返回值为一个对象，内部有一个current属性存放拿到的dom对象（组件实例）
3、通过ref绑定要获取的元素或者组件 - 获取
dom实例
import { useEffect, useRef } from 'react' function App() { const divRef = useRef(null) useEffect(() => { console.log(divRef) },[]) return ( <div> <div ref={ divRef }>this is div</div> </div> ) } export default App
- 获取
组件实例
函数组件由于没有实例，不能使用ref获取，如果想获取组件实例，必须是类组件。
import React, { useEffect, useRef } from 'react' // 类组件 class Sub extends React.Component { render () { return ( <div>子组件</div> ) } } // 函数组件不 useRef 获取，会报错 // function Sub () { // return ( // <div>子组件</div> // ) // } function App() { const divRef = useRef(null) useEffect(() => { console.log(divRef) },[]) return ( <div> <Sub ref={ divRef }>this is div</Sub> </div> ) } export default App
