forwardRef如何使用

forwardRef是React中的一个API，用于在函数组件中获取子组件的ref。使用forwardRef需要两个步骤：

1. 创建一个函数组件，并将props和ref作为参数传入。
2. 在组件内部使用React.forwardRef()方法将props和ref传递给子组件。

示例代码如下：

import React, { forwardRef } from 'react';

const MyComponent = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

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

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <MyComponent ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
};

在上面的代码中，我们创建了一个名为MyComponent的函数组件，并使用forwardRef将props和ref传递给子组件。在父组件ParentComponent中，我们使用useRef来创建一个inputRef，并将其传递给MyComponent。最后，我们在handleClick函数中使用inputRef.current.focus()来聚焦输入框。