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

資訊專欄INFORMATION COLUMN

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

tomlingtm / 2262人閱讀

摘要：之前使用始終無(wú)法應(yīng)用于高階組件中，最近終于搗鼓出來(lái)了，于是記錄下來(lái)。純粹的高階組件中并不是組件，只是一個(gè)組件為參數(shù)的函數(shù)，調(diào)用以后才成為組件。在的組件中，的周期調(diào)用指向的就是中對(duì)應(yīng)的元素。

之前使用React.forwardRef始終無(wú)法應(yīng)用于React高階組件中，最近終于搗鼓出來(lái)了，于是記錄下來(lái)。
關(guān)鍵點(diǎn)就是React.forwardRef的API中ref必須指向dom元素而不是React組件。codepen實(shí)例請(qǐng)劃到底部。

一、React.forwardRef使用示例

下面就是應(yīng)用到React組件的錯(cuò)誤示例：

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

這就是我之前經(jīng)常犯的錯(cuò)誤， 這里的ref是無(wú)法生效的。

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

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





))

二、React.forwardRef應(yīng)用到高階組件中
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 (
                
                  
            
            )
        }
    }
    
    //對(duì)MidComponent組件屬性進(jìn)行類型經(jīng)查 
    MidComponent.propTypes = {
        forwardedRef: PropTypes.object,
    }
    return  MidComponent
}
exports.withA=withA

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

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

最后應(yīng)用實(shí)例：

import React from "react"
import ReactDOM from  "react-dom"
//假設(shè)withA存儲(chǔ)于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組件，只是一個(gè)React組件為參數(shù)的函數(shù)，調(diào)用以后才成為React組件。那么直接寫入一個(gè)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

最后應(yīng)用實(shí)例：

import React from "react"
import ReactDOM from  "react-dom"
//假設(shè)AasParent存儲(chǔ)于AasParent.jsx文件。注意與【1】中的區(qū)別
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"))

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103779.html

相關(guān)文章

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

    摘要：通常在組件的構(gòu)造函數(shù)內(nèi)創(chuàng)建，使其在整個(gè)組件中可用。例如純文本查看復(fù)制代碼如上所示一個(gè)實(shí)例在構(gòu)造函數(shù)中創(chuàng)建，并賦值給在方法內(nèi)部，將構(gòu)造函數(shù)中創(chuàng)建的傳遞給接下來(lái)，讓我們看一個(gè)在組件中使用的示例。回調(diào)回調(diào)是在中使用的另一種方式。 使用 React 時(shí)，我們的默認(rèn)思維方式應(yīng)該是 不會(huì)強(qiáng)制修改 DOM ，而是通過(guò)傳入 props 重新渲染組件。但是，有些情況卻無(wú)法避免修改 DOM 。React ...

    Backache 評(píng)論0 收藏0

  • 02.react進(jìn)階指南

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

    zzbo 評(píng)論0 收藏0

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

    摘要：一作用獲取目標(biāo)的實(shí)例使用源碼可修改的不可變的對(duì)象沒(méi)見(jiàn)過(guò)這種寫法初始化對(duì)象，屬性初始值為解析源碼比較簡(jiǎn)單，就是返回了帶有屬性的二作用從父組件中獲取子組件是的實(shí)例使用是沒(méi)有實(shí)例的，因?yàn)樗牵詻](méi)有，所以不能通過(guò)來(lái)拿到實(shí)例將的傳給子組件，并綁定 showImg(https://segmentfault.com/img/remote/1460000019877636); 一、React.cr...

    aisuhua 評(píng)論0 收藏0

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

    前言 HOC(高階組件)是React中的一種組織代碼的手段,而不是一個(gè)API. 這種設(shè)計(jì)模式可以復(fù)用在React組件中的代碼與邏輯,因?yàn)橐话銇?lái)講React組件比較容易復(fù)用渲染函數(shù), 也就是主要負(fù)責(zé)HTML的輸出. 高階組件實(shí)際上是經(jīng)過(guò)一個(gè)包裝函數(shù)返回的組件,這類函數(shù)接收React組件處理傳入的組件,然后返回一個(gè)新的組件. 注意:前提是建立在不修改原有組件的基礎(chǔ)上. 文字描述太模糊,借助于官方...

    W4n9Hu1 評(píng)論0 收藏0

  • React v16.3.0: New lifecycles and context API

    摘要：為管理提供了一個(gè)新的方案，它為字符串提供了方便，并且沒(méi)有任何缺點(diǎn)司徒正美注意除了新的外，回調(diào)將繼續(xù)得到支持。例如司徒正美通常會(huì)將傳遞給它們包裝的組件。 幾天前，我們寫了一篇關(guān)于即將到來(lái)的對(duì)我們的傳統(tǒng)生命周期方法的變更的文章，包括逐步遷移策略。在React 16.3.0中，我們添加了一些新的生命周期方法來(lái)幫助遷移。我們還引入了新的API，用于長(zhǎng)時(shí)間請(qǐng)求的特性:一個(gè)官方的上下文API、一個(gè)...

    zombieda 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<