react hooks 父組件通過ref獲取子組件的變量和方法

import React, { useState, useRef, forwardRef, useImperativeHandle } from 'react';
import {Button} from 'antd';

const Child: React.FC<any> = forwardRef((props, ref) => {
  
  const [childText, setChildText] = useState<number>(1);

  const childAbc = () => {
    console.log('childAbc');
  };

  // 把實例傳給ref，然后父組件可以通過ref獲取子組件的變量和方法。
  useImperativeHandle(ref, () => ({
    childAbc,
    childText,
    setChildText,
  }));

  return (
    <div className="intelligenceSearch">
      子組件
      childIndex -變化了 {childText}
    </div>
  );
});

const Father: React.FC<any> = (props) => {
  // 獲取子組件的實例和方法
  let childRef = useRef<any>(null);

  return (
    <div className="intelligenceSearch">
      父組件
      <Button onClick={()=>{
        let {childText, setChildText}: {childText: number; setChildText: Function} = childRef.current;
        setChildText(childText+1)
      }}>改變childText的值</Button>

      <Button onClick={() => {
        const {childAbc} = childRef.current;
        childAbc && childAbc();
      }}>執行子組件childAbc方法</Button>

      ----------
      <Child ref={childRef} />
    </div>
  );
};

export default Father;