日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

一、Refs 是什么

Refs 在計算機中稱為彈性文件系統(tǒng)(英語：Resilient File System，簡稱ReFS)

React 中的 Refs提供了一種方式，允許我們訪問 DOM節(jié)點或在 render方法中創(chuàng)建的 React元素

本質(zhì)為ReactDOM.render()返回的組件實例，如果是渲染組件則返回的是組件實例，如果渲染dom則返回的是具體的dom節(jié)點

二、如何使用

創(chuàng)建ref的形式有三種：

• 傳入字符串，使用時通過 this.refs.傳入的字符串的格式獲取對應的元素
• 傳入對象，對象是通過 React.createRef() 方式創(chuàng)建出來，使用時獲取到創(chuàng)建的對象中存在 current 屬性就是對應的元素
• 傳入函數(shù)，該函數(shù)會在 DOM 被掛載時進行回調(diào)，這個函數(shù)會傳入一個 元素對象，可以自己保存，使用時，直接拿到之前保存的元素對象即可
• 傳入hook，hook是通過 useRef() 方式創(chuàng)建，使用時通過生成hook對象的 current 屬性就是對應的元素

傳入字符串

只需要在對應元素或組件中ref屬性

 
 
 
 

  
  
  
  
class MyComponent extends React.Component {
  
  
  
  
  constructor(props) {
  
  
  
  
    super(props);
  
  
  
  
    this.myRef = React.createRef();
  
  
  
  
  }
  
  
  
  
  render() {
  
  
  
  
    return ;
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

訪問當前節(jié)點的方式如下：

  
 
 
 

   
  
  
  
this.refs.myref.innerHTML = "hello";
  
 
 
 

傳入對象

refs通過React.createRef()創(chuàng)建，然后將ref屬性添加到React元素中，如下：

  
 
 
 

   
  
  
  
class MyComponent extends React.Component {
   
  
  
  
  constructor(props) {
   
  
  
  
    super(props);
   
  
  
  
    this.myRef = React.createRef();
   
  
  
  
  }
   
  
  
  
  render() {
   
  
  
  
    return ;
   
  
  
  
  }
   
  
  
  
}
  
 
 
 

當 ref 被傳遞給 render 中的元素時，對該節(jié)點的引用可以在 ref 的 current 屬性中訪問

   
 
 
 

    
  
  
  
const node = this.myRef.current;
   
 
 
 

傳入函數(shù)

當ref傳入為一個函數(shù)的時候，在渲染過程中，回調(diào)函數(shù)參數(shù)會傳入一個元素對象，然后通過實例將對象進行保存

   
 
 
 

    
  
  
  
class MyComponent extends React.Component {
    
  
  
  
  constructor(props) {
    
  
  
  
    super(props);
    
  
  
  
    this.myRef = React.createRef();
    
  
  
  
  }
    
  
  
  
  render() {
    
  
  
  
    return  this.myref = element} />;
    
  
  
  
  }
    
  
  
  
}
   
 
 
 

獲取ref對象只需要通過先前存儲的對象即可

    
 
 
 

     
  
  
  
const node = this.myref 
    
 
 
 

傳入hook

通過useRef創(chuàng)建一個ref，整體使用方式與React.createRef一致

    
 
 
 

     
  
  
  
function App(props) {
     
  
  
  
  const myref = useRef()
     
  
  
  
  return (
     
  
  
  
    <>