欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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给父组件,根据在文档和其他博客上给出的方法,一共有两大步骤:

  1. 将ref传递到子组件中
  2. 需要使用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()调用函数了

上一篇: c#中泛型

下一篇: 类型转换函数