父组件调用子组件 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 的 ref
  const inputRef = useRef<any>(null);

  function handleClick() {
    // 操作 MyInput 的 ref
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>获取焦点</button>
    </>
  );
}
export default ExposeRef;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

接着，我们定义了一个名为 ExposeRef 的函数组件。在这个组件内部，我们使用 useRef 创建了一个名为 inputRef 的引用。

在组件的返回值中，我们使用 MyInput 组件，并将 inputRef 作为 ref 属性传递给它。这样，inputRef 就可以在 MyInput 组件内部访问到 input 元素的引用。

同时，我们渲染了一个按钮，并在点击事件的处理函数中操作了 inputRef 的引用。在 handleClick 函数中，我们调用 inputRef.current.focus() 来聚焦到 input 元素上。这样，当用户点击按钮时，输入框会获取焦点。