类组件访问函数组件下的方法

思路：forwardRef, useImperativeHandle结合使用

  1. /* Parent.jsx */
  2. import React, { forwardRef, useRef, useImperativeHandle } from 'react';
  4. export default function ParentFunction() {
  5.     const childRef = useRef();
  7.       // 如果是类组件需要使用createRef
  8.     // childRef: React.RefObject<any> = React.createRef();
  10.     return (
  11.         <div className="container">
  12.             <div>
  13.                 Parent Component
  14.             </div>
  15.             <button
  16.                 onClick={() => { childRef.current.showAlert() }}
  17.             >
  18.             Call Function
  19.             </button>
  20.             <Child ref={childRef}/>
  21.         </div>
  22.     )
  23. }
  25. /* Child.jsx */
  26. const Child = forwardRef((props, ref) => {
  27.     useImperativeHandle(
  28.         ref,
  29.         () => ({
  30.             showAlert() {
  31.                 alert("Child Function Called")
  32.             }
  33.         }),
  34.     )
  35.     return (
  36.        <div>Child Component</div>
  37.     )
  38. })