react高阶组件 父组件调用子组件方法

React高阶组件是一种用于复用组件逻辑的技术，开发者可以通过HOC来增强一个组件的功能并将其返回给调用者。由于高阶组件本身并不是真正的组件，而是一个函数，因此无法直接调用子组件的方法。

但是，可以通过Ref来实现父组件调用子组件方法的功能。

用到的hooks：useImperativeHandle(ref, createHandle, [deps])

参数说明：

1.ref：需要被赋值的ref对象。

2.createHandle：createHandle函数的返回值作为ref.current的值。

3.[deps]：依赖数组，依赖发生变化会重新执行createHandle函数。

React官网对useImperativeHandle介绍也比较简短。总结一句话就是：子组件利用useImperativeHandle可以让父组件输出任意数据。

具体实现步骤如下：

1.在子组件中定义一个Ref，并通过useImperativeHandle() Hook向外暴露需要调用的方法，例如：

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

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

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

  return (
    <button onClick={handleClick}>点击</button>
  );
});

export default ChildComponent;

上面的代码中，我们使用了React.forwardRef()方法来创建了一个子组件，然后在组件内部定义了一个Ref和一个点击事件处理函数handleClick()。通过useImperativeHandle() Hook，我们将handleClick方法向外暴露出来，供父组件使用。

2.在父组件中使用Ref获取子组件实例，并调用其方法，例如：

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

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

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

  return (
    <div>
      <button onClick={handleButtonClick}>点击调用子组件方法</button>
      <ChildComponent ref={childRef} />
    </div>
  );
};

export default ParentComponent;

上面的代码中，我们首先使用React.useRef()方法创建了一个Ref对象childRef，然后在父组件内部定义了一个事件处理函数handleButtonClick()。当点击按钮时，我们通过childRef.current.handleClick()来调用子组件中暴露的方法handleClick()。

综上所述，通过使用Ref来获取子组件实例并调用其方法，父组件就可以实现调用子组件方法的功能了。