React useRef 详细使用

在函数组件中获取真实的 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