在React中，forwardRef是一个高级特性，用于在组件之间转发ref。它允许你获取对子组件中的DOM元素或组件实例的引用。forwardRef通常用于以下场景：
-
包装第三方组件：当你使用第三方UI库的组件时，可能想要直接访问这些组件内部的DOM元素或方法，而不是通过props进行传递。通过使用forwardRef，你可以将ref传递给封装的第三方组件，以便直接操作其内部的DOM或方法。
-
父组件访问子组件的实例或DOM：有时，父组件需要访问子组件的实例或其内部的DOM元素。通过使用forwardRef，你可以在子组件中封装并暴露ref，使得父组件能够直接引用子组件实例或DOM元素。
-
高阶组件（HOC）中的ref传递：当你使用高阶组件来增强或修改组件时，可能需要将ref正确地传递到被包装的组件中。forwardRef可以帮助你在HOC中正确地转发ref，确保ref在组件层次结构中正确传递和使用。
下面是一个使用forwardRef的示例：
import React, { forwardRef } from 'react';
const FancyInput = forwardRef((props, ref) => {
return <input ref={ref} {...props} />;
});
const ParentComponent = () => {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<FancyInput ref={inputRef} />
<button onClick={handleClick}>Focus Input</button>
</div>
);
};
在上面的示例中，FancyInput组件使用了forwardRef来转发ref。父组件ParentComponent可以通过将ref传递给FancyInput来获取对输入框的引用，并在点击按钮时聚焦该输入框。
通过使用forwardRef，你可以方便地访问子组件内部的DOM元素或实例，并实现更灵活和可复用的组件逻辑。