组件是开发中不可缺少的部分，通过对组件的合理使用可以极大便捷的进行代码开发。通过对组件的使用，关于父级中调用组件方法也就成了不可避免的功能。

那么在react中我们可以如何实现在父级调用定义在子集组件组件中的方法呢？

本篇就来介绍在如何使用useImperativeHandle实现父级调用子集组件暴露的方法。

父级页面代码如下：

import { useState,useEffect,useRef } from "react";
import React from 'react'
import EditMode from "./EditMode"
export default function overviewPage() {
  const refreshFun:any = useRef();
  const refresh = () =>{
	  //调用组件方法
	  refreshFun.current.test();
  }
  const refresh1 = () =>{
  	  //调用组件方法
  	  refreshFun.current.test1();
  }
  return (
    <div className="base_page">
		<div onClick={() => refresh()}>刷新</div>
		<div onClick={() => refresh1()}>刷新1</div>
		<EditMode ref={refreshFun}/>
    </div>
  );
}

组件页面代码如下

import { useImperativeHandle,forwardRef } from "react";
const LayoutHeader = ({},ref:any) => {
  useImperativeHandle(ref, () => ({
    test,
    test1: () => {
		console.log('2222')
    }
  }));
  const test = () =>{
	  console.log("test")
  }
  return (
    <div>子页面</div>
  );
};
export default forwardRef(LayoutHeader);

注意点：

    forwardRef：在组件中需要使用forwardRef

    useImperativeHandle：需要暴露出去的方法