詳解Ref在React中的交叉用法
一、首先說明下什么是Ref
Ref 轉(zhuǎn)發(fā)是一項將 ref 自動地通過組件傳遞到其一子組件的技巧。對于大多數(shù)應用中的組件來說,這通常不是必需的。但其對某些組件,尤其是可重用的組件庫是很有用的
Ref官網(wǎng)說明:點擊這里
二、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是因為ref會被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是因為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包裹的類組件時,因為最外層已經(jīng)被包裹成了react-redux的Provider,所以需要將ref屬性透傳如真正React組件中,這個時候需要關注下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 設置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是因為ref會被react特殊處理,不會作為props透傳到react組件中,類似于key */} <TestClassConnect ref={el => { console.log('new render refs') testClassRef.current = ReactDom.findDOMNode(el); }} /> ) }
以上就是詳解Ref在React中的交叉用法的詳細內(nèi)容,更多關于Ref在React中的交叉用法的資料請關注腳本之家其它相關文章!
相關文章
React動畫實現(xiàn)方案Framer Motion讓頁面自己動起來
這篇文章主要為大家介紹了React動畫實現(xiàn)方案Framer Motion讓頁面自己動起來,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10ReactHook使用useState更新變量后,如何拿到變量更新后的值
這篇文章主要介紹了ReactHook使用useState更新變量后,如何拿到變量更新后的值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03React競態(tài)條件Race Condition實例詳解
這篇文章主要為大家介紹了React競態(tài)條件Race Condition實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11React Native中NavigatorIOS組件的簡單使用詳解
這篇文章主要介紹了React Native中NavigatorIOS組件的簡單使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01React State狀態(tài)與生命周期的實現(xiàn)方法
這篇文章主要介紹了React State狀態(tài)與生命周期的實現(xiàn)方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03React Native 集成 ArcGIS 地圖的詳細過程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫,本文給大家介紹React Native 集成 ArcGIS 地圖的詳細過程,感興趣的朋友跟隨小編一起看看吧2024-06-06