Reaccionar usoRef uso detallado

• Obtenga el objeto domde elemento .

• Pasos para el uso

  1. useRefFunción

  2. Ejecute useRefla función y pásela null, el valor de retorno es un objeto, y hay una currentpropiedad para almacenar el domobjeto obtenido (instancia de componente)

  3. refLigar

• obtener dominstancia

  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
  

• obtener 组件instancia

  Dado que el componente de función no tiene instancia, no se puede refobtener Si desea obtener una instancia de componente, debe ser un componente de clase.

  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