国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React高階組件中使用React.forwardRef的技巧

tomlingtm / 2269人閱讀

摘要：之前使用始終無法應用于高階組件中，最近終于搗鼓出來了，于是記錄下來。純粹的高階組件中并不是組件，只是一個組件為參數的函數，調用以后才成為組件。在的組件中，的周期調用指向的就是中對應的元素。

之前使用React.forwardRef始終無法應用于React高階組件中，最近終于搗鼓出來了，于是記錄下來。
關鍵點就是React.forwardRef的API中ref必須指向dom元素而不是React組件。codepen實例請劃到底部。

一、React.forwardRef使用示例

下面就是應用到React組件的錯誤示例：

const  A=React.forwardRef((props,ref)=>)

這就是我之前經常犯的錯誤， 這里的ref是無法生效的。

前面提到ref必須指向dom元素，那么正確方法就應用而生：

const  A=React.forwardRef((props,ref)=>(





))

二、React.forwardRef應用到高階組件中
2.1. withComponent類型的高階組件【1】

import React from "react"
import A from "./a.jsx"
import PropTypes from "prop-types";

function withA(Component){
    const ForWardedComponent = React.forwardRef((props, ref) => 

               
           
);
     class MidComponent extends React.Component {
        render() {
            const props = this.props
            return (
                
                  
            
            )
        }
    }
    
    //對MidComponent組件屬性進行類型經查 
    MidComponent.propTypes = {
        forwardedRef: PropTypes.object,
    }
    return  MidComponent
}
exports.withA=withA

這樣，在上述示例的組件A中，A的周期componentDidMount() 調用 this.props.forwardedRef.current ,指向的就是上述示例中ForWardedComponent對應的dom元素。
是B組件對應的dom的父元素，而不是該dom
在a.jsx中某處:

    componentDidMount(){
     console.log(this.props.forwardedRef.current)
    }

最后應用實例：

import React from "react"
import ReactDOM from  "react-dom"
//假設withA存儲于withA.js文件。
import {withA}   from  "./withA.js"  
 const B=()=>
hello world

const B2=withA(B)
class App extends React.Component {
      constructor(props) {
        super(props)
        this.forwardedRef=React.creactRef()        
        }
        
        render() {
           return  

               
           

        }
}

ReactDOM.render(,document.getElementById("app"))

2.2 純粹的高階組件（Parent-Child）
【1】中并不是React組件，只是一個React組件為參數的函數，調用以后才成為React組件。那么直接寫入一個Parent組件又該如何呢？

import React from "react"
import A from "./a.jsx"
import PropTypes from "prop-types";

function AasParent(props){
    const ForWardedComponent = React.forwardRef((props, ref) => 

               {props.children}
           
);
      return (
                
                  
            )
}
AasParent.propTypes = {
        forwardedRef: PropTypes.object,
    }
 
module.exports=AasParent

最后應用實例：

import React from "react"
import ReactDOM from  "react-dom"
//假設AasParent存儲于AasParent.jsx文件。注意與【1】中的區別
import AasParent   from  "./AasParent.jsx"  
 const B=(props)=>
{props.greetings}


class App extends React.Component {
      constructor(props) {
        super(props)
        this.forwardedRef=React.creactRef()        
        }
        
        render() {
           return  
               
           
        }
}

ReactDOM.render(,document.getElementById("app"))

三、總結
1.React.forwardRef的API中ref必須指向dom元素而不是React組件。
2.在【1】的組件A中，A的周期componentDidMount() 調用 this.props.forwardedRef.current ,指向的就是【1】中ForWardedComponent對應的dom元素。是【1】中B組件對應的dom的父dom元素，而不是該dom。
3.codepen實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103779.html

相關文章

  • 如何在 React 組件中正確使用 Refs的指南

    摘要：通常在組件的構造函數內創建，使其在整個組件中可用。例如純文本查看復制代碼如上所示一個實例在構造函數中創建，并賦值給在方法內部，將構造函數中創建的傳遞給接下來，讓我們看一個在組件中使用的示例。回調回調是在中使用的另一種方式。 使用 React 時，我們的默認思維方式應該是 不會強制修改 DOM ，而是通過傳入 props 重新渲染組件。但是，有些情況卻無法避免修改 DOM 。React ...

    Backache 評論0 收藏0

  • 02.react進階指南

    摘要：指定讀取當前的。它為其后代元素觸發額外的檢查和警告。嚴格模式檢查僅在開發模式下運行它們不會影響生產構建。作用識別不安全的生命周期關于使用過時字符串的警告關于使用廢棄的方法的警告檢測意外的副作用檢測過時的為高階組件。 react 進階 懶加載 React.lazy函數能讓你像渲染常規組件一樣處理動態引入（的組件）。Suspense加載指示器為組件做優雅降級。fallback屬性接受任何在...

    zzbo 評論0 收藏0

  • React源碼解析之React.createRef()/forwardRef()

    摘要：一作用獲取目標的實例使用源碼可修改的不可變的對象沒見過這種寫法初始化對象，屬性初始值為解析源碼比較簡單，就是返回了帶有屬性的二作用從父組件中獲取子組件是的實例使用是沒有實例的，因為它是，所以沒有，所以不能通過來拿到實例將的傳給子組件，并綁定 showImg(https://segmentfault.com/img/remote/1460000019877636); 一、React.cr...

    aisuhua 評論0 收藏0

  • 寫給自己的React HOC(高階組件)手冊

    前言 HOC(高階組件)是React中的一種組織代碼的手段,而不是一個API. 這種設計模式可以復用在React組件中的代碼與邏輯,因為一般來講React組件比較容易復用渲染函數, 也就是主要負責HTML的輸出. 高階組件實際上是經過一個包裝函數返回的組件,這類函數接收React組件處理傳入的組件,然后返回一個新的組件. 注意:前提是建立在不修改原有組件的基礎上. 文字描述太模糊,借助于官方...

    W4n9Hu1 評論0 收藏0

  • React v16.3.0: New lifecycles and context API

    摘要：為管理提供了一個新的方案，它為字符串提供了方便，并且沒有任何缺點司徒正美注意除了新的外，回調將繼續得到支持。例如司徒正美通常會將傳遞給它們包裝的組件。 幾天前，我們寫了一篇關于即將到來的對我們的傳統生命周期方法的變更的文章，包括逐步遷移策略。在React 16.3.0中，我們添加了一些新的生命周期方法來幫助遷移。我們還引入了新的API，用于長時間請求的特性:一個官方的上下文API、一個...

    zombieda 評論0 收藏0

發表評論

0條評論

tomlingtm

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<