React@16.x(12)ref 轉發-forwardRef

目錄

  • 1,介紹
  • 2,類組件如何使用
  • 4,應用場景-高階組件HOC

1,介紹

上篇文章中提到,ref 只能對類組件使用,不能對函數組件使用。

ref 轉發可以對函數組件實現類似的功能。

使用舉例

import React, { Component } from "react";function CompA(props, ref) {return (<h1><div ref={ref}>組件A</div><span>{props.desc}</span></h1>);
}const NewCompA = React.forwardRef(CompA);export default class App extends Component {refA = React.createRef();componentDidMount() {console.log(this.refA);}render() {return <NewCompA ref={this.refA} desc="測試"></NewCompA>;}
}

打印結果

在這里插入圖片描述

解釋

通過 React.forwardRef() 來實現 ref 轉發。其實就是通過 HOC:參數為組件,返回新組件。

特點:

  • 參數只能是函數組件,并且該函數接收2個參數
    • 參數一不變,依舊是 props
    • 參數二就是一個 ref: {current: null},也就是 React.forwardRef() 返回的新組件接收的 ref 屬性。它讓使用者來決定作為誰的引用。比如上面的例子中,就作為一個子元素的引用。
  • 返回的新組件,和原來的函數組件沒有任何區別,只是可以傳遞 ref 屬性了。

2,類組件如何使用

既然明確規定了 React.forwardRef() 的參數只能是函數,該函數的參數也是確定的,那可以將類組件包裝一層來達到目的。

更改上面的例子如下:

class CompA extends Component {render() {return (<h1><div ref={this.props.forwardRef}>組件A</div><span>{this.props.desc}</span></h1>);}
}// forwardRef 這個屬性名是隨意的,只是約定俗成為這個單詞了。
const NewCompA = React.forwardRef((props, ref) => {return <CompA {...props} forwardRef={ref}></CompA>;
});

4,應用場景-高階組件HOC

在之前的高階組件HOC中,有個問題沒有解決:

const Alog = withLog(CompA)

此時使用的是 Alog 組件,那如何獲取原組件 CompA 的方法和屬性呢?
Alog 使用 ref 獲取的并不是是 CompA 的組件實例。

可以使用 ref 轉發解決:

源代碼:

export default function withLog(Comp) {return class LogWrapper extends Component {componentDidMount() {console.log(`${Comp.name}組件被創建了`);}componentWillUnmount() {console.log(`${Comp.name}組件被銷毀了`);}render() {return <Comp {...this.props} />;}};
}

修改后:

import React, { Component } from "react";export default function withLog(Comp) {class LogWrapper extends Component {componentDidMount() {console.log(`${Comp.name}組件被創建了`);}componentWillUnmount() {console.log(`${Comp.name}組件被銷毀了`);}render() {const { forwardRef, ...rest } = this.props;return <Comp ref={forwardRef} {...rest} />;}}return React.forwardRef((props, ref) => {return <LogWrapper {...props} forwardRef={ref}></LogWrapper>;});
}

這樣在使用 withLog 時,并不會影響對源組件 ref 的獲取。


以上。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/18057.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/18057.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/18057.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

為什么選擇CleanMyMac軟件呢?推薦理由

你是否曾經遇到過這樣的問題&#xff1a;電腦運行緩慢&#xff0c;存儲空間不足&#xff0c;不知道如何清理垃圾文件&#xff1f;別擔心&#xff0c;我們為你找到了解決方案——CleanMyMac軟件。這款強大的工具可以幫助你輕松解決這些問題&#xff0c;讓你的電腦煥然一新&#…

深入理解Python中的包與模塊

新書上架~&#x1f447;全國包郵奧~ python實用小工具開發教程http://pythontoolsteach.com/3 歡迎關注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目錄 一、包的概述與功能 代碼案例&#xff1a;包的結構 二、模塊的劃分與組合 劃分模塊的方法…

開源內網穿透神器:中微子代理(neutrino-proxy)實現內網穿刺

&#x1f604; 19年之后由于某些原因斷更了三年&#xff0c;23年重新揚帆起航&#xff0c;推出更多優質博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有堅忍不拔之志 &#x1f390; 個人CSND主頁——Mi…

dubbo復習:(10)使用tripple協議進行通信

一、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.…

場景文本檢測識別學習 day10(MMdetection)

配置文件(config) 由于在大型項目中&#xff0c;一種模型需要分&#xff1a;tiny、small、big等很多種&#xff0c;而它們的區別主要在網絡結構&#xff0c;數據的加載&#xff0c;訓練策略等&#xff0c;且差別很多都很小&#xff0c;所以如果每個模型都手動從頭寫一份&#…

ChatGPT原創指令大全(持續更新)

隨著ChatGPT在互聯網上的使用越來越多&#xff0c;但很多人在使用ChatGPT的過程中會覺得得到的答案并不是很精準。究其原因其實是你給它的命令不夠準確、不夠到位。實際現在網上已經很多關于ChatGPT的網站&#xff0c;可以快速生成帶有快捷鍵的ChatGPT指令。但是對于不熟悉Chat…

LeetCode 2951.找出峰值:模擬(遍歷)

【LetMeFly】2951.找出峰值&#xff1a;模擬&#xff08;遍歷&#xff09; 力扣題目鏈接&#xff1a;https://leetcode.cn/problems/find-the-peaks/ 給你一個下標從 0 開始的數組 mountain 。你的任務是找出數組 mountain 中的所有 峰值。 以數組形式返回給定數組中 峰值 的…

視創云展「VR直播」是什么?有哪些功能和應用場景?

視創云展「VR直播」通過“3D沉浸式展廳直播高互動感”的創新玩法&#xff0c;使企業隨時隨地舉辦一場低成本、高互動、能獲客的元宇宙直播活動成為可能。「VR直播」能實現3D展廳內VR場景漫游&#xff0c;更結合音視頻交互、同屏互動等新功能&#xff0c;為用戶帶來更沉浸的虛擬…

Java基礎之 API 字符串

文章目錄 API字符串String概述創建對象 java的內存模型java的常用方法(比較)練習 API 概念: APl(Application ProgrammingInterface): 應用程序編程接口 簡單理解: API就是別人已經寫好的東西&#xff0c;我們不需要自己編寫&#xff0c;直接使用即可。 Java API: 指的就是J…

馬斯克的 xAI 帝國!60億融資背后的超級布局?

在全球科技競技場&#xff0c;每個重大融資事件都是對行業格局的一次重塑。近日&#xff0c;埃隆馬斯克的人工智能初創企業 xAI 成功完成了一輪規模空前的融資——60億美元&#xff0c;此舉無疑在業界投下了一枚震撼彈&#xff0c;標志著 AI 領域內一場新的競賽拉開了序幕。 …

旅游卡在哪里拿貨?千益暢行旅游卡源頭

旅游卡是一種便捷的旅行工具&#xff0c;它可以提供多種優惠和特惠&#xff0c;讓人們在旅行中更加省錢、省心。那么&#xff0c;在千益暢行旅游卡這里&#xff0c;我們該如何拿到這張神奇的旅游卡呢&#xff1f; 首先&#xff0c;千益暢行旅游卡作為一款專為旅行愛好者打造的…

QT學習(20):QStyle類

Qt包含一組QStyle子類&#xff0c;這些子類&#xff08;QWindowsStyle&#xff0c;QMacStyle等&#xff09;模擬Qt支持的不同平臺的樣式&#xff0c;默認情況下&#xff0c;這些樣式內置在Qt GUI模塊中&#xff0c;樣式也可以作為插件提供。 Qt的內置widgets使用QStyle來執行幾…

LangChain之鏈的應用(下)

LangChain之鏈的應用 Chain鏈的應用配置LLMChain&#xff1a;簡單鏈create_stuff_documents_chain&#xff1a;文檔鏈create_extraction_chain&#xff1a;提取信息鏈LLMMathChain&#xff1a;數學鏈create_sql_query_chain&#xff1a;SQL查詢鏈連接數據庫創建并使用鏈 Sequen…

K210 數字識別 教程

一、燒寫固件 連接k210開發板&#xff0c;點開燒錄固件工具&#xff0c;選中固件&#xff0c;并下載 二、模型訓練 網站&#xff1a;MaixHub 1、上傳文件 2、開始標記數據 添加9個標簽&#xff0c;命名為1~9&#xff0c;按鍵盤w開始標記&#xff0c;鍵盤D可以下一張圖片&…

計算機網絡(1

網絡初識 目錄 網絡初識一. 網絡分類1. 局域網LAN(Local Area Network):2. 廣域網WAN(Wide Area Network): 二. 組建網絡的基礎設備1. 路由器2. 交換機 三. 標識符 協議 (protocol)一. 協議分層1. 分層的好處2. OSI七層分層3. TCP/IP五層模型(或四層) 模型(1. 物理層(可不算)(2…

6.8 LIBBPF API(七,bpf_core_read.h 函數,定義,枚舉)

一,函數 void * bpf_rdonly_cast (const void *obj, __u32 btf_id) __ksym __weak 二,定義 __CORE_RELO(src, field, info) __builtin_preserve_field_info((src)->field,BPF_FIELD_##info) __CORE_BITFIELD_PROBE_READ(dst, src, fld) bpf_probe_read_kernel( \ (v…

學習前端第四十二天(修改文檔)

1、創建一個元素 docunment.createElement( tag )&#xff1b;創建一個元素節點 let div document.createElement&#xff08;“div”&#xff09;&#xff1b;創建一個div標簽 document.createTextNode&#xff08; Text &#xff09;&#xff1b;創建一個文本節點 let t…

Windows hook介紹與代碼演示

Windows Hook 是一種機制&#xff0c;允許應用程序監視系統或處理特定事件。它可以攔截和更改消息&#xff0c;甚至可以插入到其他應用程序的消息處理機制中。Windows 提供了多種掛鉤類型&#xff0c;例如鍵盤掛鉤、鼠標掛鉤、消息掛鉤等。 hook代碼實現 下面是一個使用 Wind…

【Zotero】【MacOS】Zotero6常用插件總結

因為目前MacOS只支持Zotero6&#xff0c;所以我將網上找到的教程以及自己找到適應Zotero6版本的插件做了個整合 教程地址&#xff1a;Zotero6安裝/插件安裝教程 插件地址&#xff1a;Zotero6_Plugs

Django教程——數據庫操作(增刪改查)

在上篇文章中我們學習了Django教程——模型&#xff0c;這篇文章學習Django教程——數據庫操作&#xff08;增刪改查&#xff09;。 在學習數據庫操作之前&#xff0c;我們需要定義好模型類&#xff0c;模型類代碼如下&#xff1a; from django.db import models class UserM…