目錄

• 一、首先說明下什麼是Ref
  
• 二、ref在hooks中的用法
  
• 1、ref在hooks中HTMLDom的用法
  
• 2、ref在hooks中與函式式元件的用法
  
• 3、ref在hooks中與類元件一同使用
  
• 4、ref在hooks中與class、react-redux一同使用
  

一、首先說明下什麼是Ref

Ref 轉發是一項將 ref 自動地通過元件傳遞到其一子元件的技巧。對於大多數應用中的元件來說，這通常不是必需的。但其對某些元件，尤其是可重用的元件庫是很有用的

Ref官網說明：點選這裡

二、ref在hooks中的用法

1、ref在hooks中HTMLDom的用法

這裡就如官網一樣正常使用即可，官網例子：這裡

const Fn = ()=>{
    const testRef = useRef(null);
    console.log('testRef',testRef.current); // 會渲染兩次，第一次列印null，第二次是<div>測試</div>
    return (
        <div ref={testRef}>測試</div>
    )
}

2、ref在hooks中與函式式元件的用法

這裡只需要將ref屬性透傳到函式式元件中即可

const Fn = ()=>{
    const testRef = useRef(null);
    // 定義Test函式元件
    const Test = ({ refs }) => <程式設計客棧;div ref={refs}>我是ReactDOM test</div>;
    console.log('testRef',testRef.current); http://www.cppcns.com// 會渲染兩次，第一次列印null，第二次是<div>我是ReactDOM test</div>
    return (
        {/* 這裡之所以用refs而不用ref作為prop是因為ref會被react特殊處理，不會作為props透傳到react元件中，類似於key */}
         <Test refs={testRef} /> 
    )
}

3、ref在hooks中與類元件一同使用

這裡僅需要在類元件的回撥ref中手動賦值給useRef物件即可，更多回調ref：這裡

import ReactDom from 'react-dom';

const Fn = ()=>{
    const testClassRef = useRef(null);
    // 定程式設計客棧義TestClass類元件
    class TestClass extends React.Component {
        render() {
          return (
            <div >
                我是TestClass類元件 測試
            </div>
          )
        }
    }
    console.log('testClassRef',testClassRef.current); // 會渲染兩次，第一次列印null，第二次是<div>我是TestClass類元件 測試</div>
    return (
        {/* 這裡之所以用refs而不用ref作為prop是因為ref會被react特殊處理，不會作為props透傳到react元件中，類似於key */}
         <TestClass 
             ref={el => {
                console.log('new render refs')
                testClassRef.current = ReactDom.findDOMNode(el);
             }} 
         /> 
    )
}

4、ref在hooks中與class、react-redux一同使用

當遇到connect包裹的類元件時，因為最外層已經被包裹成了react-redux的Provider，所以需要將ref屬性透傳如真正React元件中，這個時候需要關注下connect的forwardRef屬性

import ReactDom from 'react-dom';
import { connect } from 'reactwww.cppcns.com-redux';

const Fn = ()=>{
    const testClassRef = useRef(null);
    // 定義TestClass類元件
    class TestClass extends React.Component {
        render() {
          return (
            <div >
                我是TestClass類元件 測試
            </div>
          )
        }
    }
    //定義TestClass的connect包裹後的元件
    //forwardRef:true 設定redux允許將ref作為props傳入到connect包裹的元件中
    const TestClassConnect = connect(null,null,{ forwardRef: true })(TestClass);
    
    console.log('testClassRef',testClassRef.current); // 會渲染兩次，第一次列印null，第二次是<div>我是TestClass類元件 測試</div>
    return (
        {/* 這裡之所以用refs而不用ref作為prop是因為ref會被react特殊處理，不會作為props透傳到react元件中，類似於key */}
         &lTKfgTKhmoWt;TestClassConnect
            ref={el => {
              console.log('new render refs')
              testClassRef.current = ReactDom.findDOMNode(el);
            }}
          />
    )
}

以上就是詳解Ref在React中的交叉用法的詳細內容，更多關於Ref在React中的交叉用法的資料請關注我們其它相關文章！