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