umi暴露子组件方法

在 Umi 中，我们可以通过使用 ref 和 forwardRef 的方式来暴露子组件的方法。下面是一个示例：

首先，定义一个子组件 Child：

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

const Child = forwardRef((props, ref) => {
  const handleClick = () => {
    console.log('Child component clicked');
  };

  useImperativeHandle(ref, () => ({
    handleClick,
  }));

  return <button onClick={handleClick}>Click me</button>;
});

export default Child;

在父组件中，我们可以通过创建一个 ref 并将其传递给子组件，然后通过 ref.current 来调用子组件的方法：

import React, { useRef } from 'react';
import Child from './Child';

const Parent = () => {
  const childRef = useRef(null);

  const handleClickChild = () => {
    childRef.current.handleClick();
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={handleClickChild}>Call Child method</button>
    </div>
  );
};

export default Parent;

这样，当点击 "Call Child method" 按钮时，会调用子组件 Child 的 handleClick 方法，并在控制台打印 "Child component clicked"。这就是在 Umi 中暴露子组件方法的方式。