父组件调用子组件 ref 不生效？组件暴露 ref ？

向你的组件暴露 ref

要暴露 ref 最关键的就是 forwardRef

forwardRef 是 React 中的一个高阶函数，用于在函数组件中将 ref 属性向下传递给子组件。

在 React 中，我们可以使用 ref 属性来获取对一个组件实例的引用，以便在父组件中操作子组件。但是，当我们在一个函数组件中使用 ref 属性时，默认情况下，React 不会将该 ref 属性传递给函数组件内部的 DOM 元素或其他组件。

这就是 forwardRef 函数的作用。它接受一个回调函数作为参数，该回调函数接收两个参数：props 和 ref。在回调函数中，我们可以将 ref 属性传递给子组件的特定元素或组件。

通过使用 forwardRef 函数，我们可以将父组件传递给函数组件的 ref 属性转发给子组件的 DOM 元素或其他组件。这样，我们就能够在父组件中通过使用函数组件的引用操作子组件。

案例：

自定义 React 组件暴露引用 (ref) , 将 inputRef 引用传递给了 MyInput 组件，并且在父组件中通过操作引用来控制子组件内部的行为。

// 向你的组件暴露 ref
import { forwardRef, useRef } from "react";// 我是子组件
// 暴露了 MyInput 函数
const MyInput = forwardRef((props, ref: any) => {return <input {...props} ref={ref} />;
});// 我是父组件
function ExposeRef() {// 获取到 MyInput 的 refconst inputRef = useRef<any>(null);function handleClick() {// 操作 MyInput 的 refinputRef.current.focus();}return (<><MyInput ref={inputRef} /><button onClick={handleClick}>获取焦点</button></>);
}
export default ExposeRef;

定义了一个函数组件 MyInput，通过使用 forwardRef 包裹组件，以便能够将父组件传递的 ref 属性传递给子组件。forwardRef 函数接受一个回调函数作为参数，该回调函数接收两个参数：props 和 ref。在这个回调函数中，我们使用 input 元素来展示输入框，并使用展开操作符 ...props 将父组件传递给 MyInput 的其他属性应用到 input 元素上，同时将 ref 设置为传递进来的 ref。