詳解Ref在React中的交叉用法

更新時(shí)間：2021年06月19日 17:16:12 作者：其野風(fēng)

眾所周知，react推出了hooks之后，很多項(xiàng)目就開始往hooks上靠攏，所以也就出現(xiàn)了class和hooks交叉使用的項(xiàng)目。這個(gè)時(shí)候使用ref需要注意一些東西

一、首先說明下什么是Ref

Ref 轉(zhuǎn)發(fā)是一項(xiàng)將 ref 自動地通過組件傳遞到其一子組件的技巧。對于大多數(shù)應(yīng)用中的組件來說，這通常不是必需的。但其對某些組件，尤其是可重用的組件庫是很有用的

Ref官網(wǎng)說明：點(diǎn)擊這里

二、ref在hooks中的用法

1、ref在hooks中HTMLDom的用法

這里就如官網(wǎng)一樣正常使用即可，官網(wǎng)例子：這里

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

2、ref在hooks中與函數(shù)式組件的用法

這里只需要將ref屬性透傳到函數(shù)式組件中即可

const Fn = ()=>{
    const testRef = useRef(null);
    // 定義Test函數(shù)組件
    const Test = ({ refs }) => <div ref={refs}>我是ReactDOM test</div>;
    console.log('testRef',testRef.current); // 會渲染兩次，第一次打印null，第二次是<div>我是ReactDOM test</div>
    return (
        {/* 這里之所以用refs而不用ref作為prop是因?yàn)閞ef會被react特殊處理，不會作為props透傳到react組件中，類似于key */}
         <Test refs={testRef} /> 
    )
}

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

這里僅需要在類組件的回調(diào)ref中手動賦值給useRef對象即可，更多回調(diào)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是因?yàn)閞ef會被react特殊處理，不會作為props透傳到react組件中，類似于key */}
         <TestClass 
             ref={el => {
                console.log('new render refs')
                testClassRef.current = ReactDom.findDOMNode(el);
             }} 
         /> 
    )
}

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

當(dāng)遇到connect包裹的類組件時(shí)，因?yàn)樽钔鈱右呀?jīng)被包裹成了react-redux的Provider，所以需要將ref屬性透傳如真正React組件中，這個(gè)時(shí)候需要關(guān)注下connect的forwardRef屬性

import ReactDom from 'react-dom';
import { connect } from 'react-redux';

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

以上就是詳解Ref在React中的交叉用法的詳細(xì)內(nèi)容，更多關(guān)于Ref在React中的交叉用法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: