React Hook父元件獲取子元件的資料 函式

2022-05-02 14:03:15 字數 1259 閱讀 8213

我們知道在react中,常用props實現子元件資料到父元件的傳遞,但是父元件呼叫子元件的功能卻不常用。文件上說ref其實不是最佳的選擇,但是想著偷懶不學redux,在網上找了很多教程,要不就是hook的講的太少,要不就是父子元件傻傻分不清,於是只好再啃了一下文件,就學了一下其它hook的api。

在這裡我們需要用到useimperativehandle這個api,其函式形式為

useimperativehandle(ref, createhandle, [deps])
其實這個api也是ref的一種形式,但是相當於做了一定的優化,可以選擇讓子元件只暴露一定的api給父元件,根據在文件和其他部落格上給出的方法,一共有兩大步驟:

將ref傳遞到子元件中

需要使用forwardref對子元件進行包裝

子元件myworldmap

const mapref = useref(null);

useimperativehandle(ref, () => else}}

})//你的return內容,注意ref

return(

)}//最後要配合forwardref

myworldmap = forwardref(myworldmap);

export default myworldmap;

注:ref是子元件宣告的時候傳進來的,也就是

function myworldmap (props,ref)

//export...

其實官方文件給出來的例子是:

function fancyinput(props, ref) 

}));

return ;

}fancyinput = forwardref(fancyinput);

兩種方法都是可以的

父元件mytrip

const mywordmapref = useref();

return(

//省略一些**,注意ref

mywordmapref.current.clickswitch()}>switch

clickall() }>all

)

現在你就可以在父元件裡面通過mywordmapref.current.clickswitch()呼叫函式了

React Hook父元件獲取子元件的資料 函式

我們知道在react中,常用props實現子元件資料到父元件的傳遞,但是父元件呼叫子元件的功能卻不常用。文件上說ref其實不是最佳的選擇,但是想著偷懶不學redux,在網上找了很多教程,要不就是hook的講的太少,要不就是父子元件傻傻分不清,於是只好再啃了一下文件,就學了一下其它hook的api。在...

Vue父元件獲取子元件資料

方法 一 從父元件呼叫子元件方法獲取資料 1 子元件addindex.vue寫乙個方法,返回要用的資料 methods 2 在父組aindex.vue件中獲取值 import procedureedit from pages procedure add addindex methods 方法 二 子...

vue 父元件獲取子元件物件例項

在實際開發中,我們是需要在父元件中去獲取子元件例項物件,記住是子元件的例項物件,比如說子元件是,在父元件使用了3次,那就有3個子元件例項。獲取子元件的方式有兩種 children 和 refs children的使用如下 children很少用,因為他是獲取當前父元件下的所有子元件例項,this.c...