React Hook父组件获取子组件的数据/函数
程序员文章站
2022-07-16 23:50:24
我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用。文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hook的讲的太少,要不就是父子组件傻傻分不清,于是只好再啃了一下文档,就学了一下其它hook的api。 ......
我们知道在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, () => { return { //clickswitch是子组件暴露的函数 clickswitch() { if(type == 1){ initchinamap(); settype(2); }else{ initwordmap(); settype(1); } } } }) //你的return内容,注意ref return( <react.fragment> <div id={"myworldmap"} style={{ width: "800px", height: "400px" }} ref={mapref}></div> </react.fragment> ) } //最后要配合forwardref myworldmap = forwardref(myworldmap); export default myworldmap;
注:ref是子组件声明的时候传进来的,也就是
function myworldmap (props,ref){ //..你的代码 } //export...
其实官方文档给出来的例子是:
function fancyinput(props, ref) { const inputref = useref(); useimperativehandle(ref, () => ({ focus: () => { inputref.current.focus(); } })); return <input ref={inputref} ... />; } fancyinput = forwardref(fancyinput);
两种方法都是可以的
父组件mytrip
const mywordmapref = useref(); return( //省略一些代码,注意ref <myworldmap prodata = { mymapdata} handlemapclick = {handlemapclick.bind(this)} ref={mywordmapref}> </myworldmap> <div classname={styles["mapbutton-wrap"]}> <buttongroup> <button onclick={() => mywordmapref.current.clickswitch()}>switch</button> <button onclick={()=>clickall() }>all</button> </buttongroup> </div> )
现在你就可以在父组件里面通过mywordmapref.current.clickswitch()
调用函数了