react 函数组件父组件调用子组件方法

react 函数组件父组件调用子组件方法

父组件利用ref对子组件做标记，通过调用子组件方法更改子组件状态，也可以调用子组件方法

首先在父组件中 ，使用useRef创建一个ref

import LogModal from "./logModal";
import  { memo, useRef } from "react";
export default memo(() => {
const LogModalRef = useRef(null);
const handleClick=()=>{
LogModalRef.current.show()//父组件调用子组件方法
}
return (
    <>
      <button onClick={handleClick}>点击</button>
      <LogModal ref={LogModalRef} />
    </>
  );
})

其次，子组件中利用forwardRef，useImperativeHandle

React.forwardRef(render)：返回一个组件，参数是一个 render函数，函数的第一个参数为父组件传递的 props，第二个参数为父组件传递的 ref，forwardRef会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

useImperativeHandle ：正常情况下 ref 是不能挂在到函数组件上的，因为函数组件没有实例，但是 useImperativeHandle 为我们提供了一个类似实例的东西。第一个参数是定义 current 对象的 ref，第二个参数是一个函数，返回值是一个对象，即这个 ref 的 current 对象，通过自定义父组件的 ref 来使用子组件 ref 的某些方法。

import { useRef, forwardRef, useImperativeHandle } from "react";
import  { memo, useRef } from "react";
const LogModal = forwardRef((props, LogModalRef) => {//第二个参数为父组件传递的 ref

//子组件暴露方法
 useImperativeHandle(LogModalRef, () => ({
    show
  }));
  
   const modalRef = useRef(null);
    const show = () => {
    modalRef.current.show();
  };
  
  return (
    <Modal ref={modalRef}>
     xxx
    </Modal>
  );
});
}
export default LogModal;