React函数式组件父调子组件方法的正确姿势

在前端React开发过程中，父组件调用子组件是常见的手法。

实现**(函数式)**父组件调用子组件需要以下几个函数。

• forwardRef 用来包括整个子组件定义函数
• useImperativeHandle 在子组件內部调用该函数用来定义需要暴露出去的方法
• useRef 父组件中使用useRef绑定子组件的引用

案例：

子组件代码:

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

const ProgressModalContext = forwardRef((props: any, ref) => {
  const [progress, setProgress] = useState('正在执行...');
  //此处hook用于定义暴露出去的方法。  
  useImperativeHandle(ref, () => ({
    getResult: () => {
      getCurrentStatus().then((resp) => {
        if (resp) {
          const response = getResponse(resp);
          if (response.success) {
            setProgress(response.message.replace(/[\r\n]/g, '<br>'));
          }
        }
      });
    },
  }));
  return (
    <div>
      <h3 style={{ color: 'red' }}>排程执行过程中请勿刷新页面，直至【关闭】按钮出现！</h3>
      <div dangerouslySetInnerHTML={{ __html: progress }} />
    </div>
  );
});

父组件代码：

 const childrenRef: any = useRef(null); //初始化一个useRef

//xxxx忽略其他代码
const openProgressModal = useCallback(() => {
    ProgressModal.open({
      key: Modal.key(),
      title: '预排程执行进度信息',
      children: <ProgressModalContext ref={childrenRef} />, //此处在子组件标签中添加ref
      closable: false,
      okButton: false,
      cancelButton: false,
      cancelText: '关闭',
      keyboardClosable: false,
      mask: true,
    });
  }, [ProgressModal]);
  //此处即可调用子组件方法
  childrenRef.current.getResult()