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);