怎样将forwardRef组件用HOC包装起来？

使用高阶组件（HOC）将forwardRef组件包装起来的方法如下：

import React, { forwardRef } from "react";

// 创建一个高阶组件
const withHOC = (WrappedComponent) => {
  // 使用forwardRef将ref传递给包装组件
  const WithHOC = forwardRef((props, ref) => {
    // 在包装组件中通过ref属性将ref传递给被包装的组件
    return <WrappedComponent {...props} ref={ref} />;
  });

  return WithHOC;
};

// 创建一个forwardRef组件
const MyComponent = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

// 使用HOC包装forwardRef组件
const WrappedComponent = withHOC(MyComponent);

// 使用包装后的组件
const App = () => {
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    // 调用inputRef的current属性获取包装组件中的ref
    inputRef.current.focus();
  }, []);

  return <WrappedComponent ref={inputRef} />;
};

export default App;

在上面的示例中，我们创建了一个名为withHOC的高阶组件，它接受一个WrappedComponent作为参数，并返回一个包装后的组件WithHOC。在WithHOC组件中，我们使用forwardRef将ref传递给被包装的组件WrappedComponent。然后，我们将WithHOC组件作为App组件的子组件使用，并传递一个ref属性，使得inputRef能够引用到input元素。

最后，我们通过调用inputRef.current.focus()来聚焦input元素，在App组件加载完成后自动获得焦点。