react 父级调用子级方法

忙里偷闲，先记下来写个大概，反正就是把代码复制跑一遍就知道怎么用了

 

父级代码：

import React, { useRef } from 'react';
import HelloWorld2 from '@/components/HelloWorld/HelloWorld2';
const Test2 =(props)=> {
  const test1 = () => {
    console.log("父组件准备调用子组件方法");
    userQqq.current.getName();
  };
    const userQqq = useRef(); // 命名最好还是user开头
    return (
    <div>
      <button onClick={test1}>调用子组件方法getName</button>
            <HelloWorld2 ref={userQqq}/>
    </div>
  )
}
export default Test2;

 

子级代码：

import React, { forwardRef, useImperativeHandle } from 'react';
// 子组件不再使用react的React方式来创建，
// 直接通过函数的方式创建，函数子组件接收两个参数，
// 第一个参数是父组件传过来的其它参数，第二个参数是ref
const HelloWorld2 = (props, ref) => {
  const getName = () => {
    console.log("子组件方法");
  };
  // react规定必须使用useImperativeHandle方法，
  // 来保存并抛出想要传递给父组件的方法或者数据，
  // 第一个参数是ref,第二个参数是函数，返回想要抛出的对象集合
  useImperativeHandle(ref, () => ({
    getName,
  }));
  return (
    <div>子组件</div>
  );
};
//必须通过forwardRef方法抛出函数组件
export default forwardRef(HelloWorld2);