写一个解决Function components cannot be given refs的例子

当我们在使用React函数组件时，可能会遇到一个错误信息：`Function components cannot be given refs`。这是因为函数组件本身是无状态的，没有实例可以被引用。

下面是一个解决这个问题的例子：

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

// 创建一个函数组件
const MyComponent = forwardRef((props, ref) => {
  // 在组件中使用 useRef 创建一个 ref
  const inputRef = useRef(null);

  // 使用 useImperativeHandle 将 ref 暴露给父组件
  useImperativeHandle(ref, () => ({
    focus: () => {
      // 在组件内部的方法中操作 inputRef
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

// 使用 MyComponent
function App() {
  // 创建一个 ref
  const myComponentRef = useRef(null);

  useEffect(() => {
    // 在组件加载后，调用暴露的 focus 方法
    myComponentRef.current.focus();
  }, []);

  return (
    <div>
      <h1>My App</h1>
      <MyComponent ref={myComponentRef} />
    </div>
  );
}

export default App;

在上面的例子中，我们使用了`forwardRef`将函数组件转换为可接受`ref`的组件。然后使用`useRef`创建一个`inputRef`，并使用`useImperativeHandle`将`ref`暴露给父组件，通过定义`focus`方法来操作`inputRef.current`的`focus`方法。

在父组件中，我们创建一个`myComponentRef`来引用`MyComponent`，并使用`useEffect`在组件加载后调用`myComponentRef.current.focus()`来聚焦输入框。

通过这种方式，我们可以解决`Function components cannot be given refs`的问题，并在函数组件内部操作相应的DOM元素。