当前位置：首页 > news >正文

WHAT - React 元素接收的 ref 详解

news 来源：原创 2025/5/8 3:54:19

1. ref 的基本概念

React 中的 ref 主要有两种类型：

字符串 ref：React 16.3 之前的用法，已经被废弃，不推荐使用。
回调 ref：提供一个函数，将 ref 作为参数传递给该函数。可以访问 DOM 元素或组件实例。
createRef()或者useRef()：推荐的现代用法，允许创建一个 ref 对象，该对象可以用于访问 DOM 元素或类组件实例。

2. 如何使用 ref

2.1 基本用法

函数组件为例：

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

const MyComponent = () => {
  const myRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (myRef.current) {
      myRef.current.focus(); // 聚焦到 input 元素
    }
  }, []);

  return <input ref={myRef} />;
};

export default MyComponent;

在这个例子中，我们使用了 useRef 钩子创建一个 ref，并将它传递给一个 <input> 元素。这样，myRef.current 就指向该 input 元素，我们可以在 useEffect 中直接操作 DOM。

这里有一个技巧，前面提过 ref 支持接收回调函数，因此我们可以让代码更加简洁：

import React, { useCallback } from 'react';

const MyComponent = () => {
  const myRef = useCallback((node) => node?.focus(), [])
  return <input ref={myRef} />;
};

export default MyComponent;

它的工作原理如下：

当 DOM 节点添加到屏幕时，React 会以 DOM 节点作为参数调用该函数。
当 DOM 节点被移除时，React 会以 null 调用该函数。

2.2 类组件使用 createRef

在类组件中，我们通常使用 React.createRef() 来创建 ref。

import React, { Component } from 'react';

class MyComponent extends Component {
  private myRef = React.createRef<HTMLInputElement>();

  componentDidMount() {
    if (this.myRef.current) {
      this.myRef.current.focus();
    }
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

export default MyComponent;

3. forwardRef 转发 ref

如果你要在函数组件中使用 ref，并且希望该 ref 被传递到子组件中，你需要使用 React.forwardRef 来转发 ref。

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

interface CustomInputProps {
  label: string;
}

const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  // 允许父组件操作子组件的方法
  useImperativeHandle(ref, () => ({
    focus: () => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    }
  }));

  return (
    <div>
      <label>{props.label}</label>
      <input ref={inputRef} />
    </div>
  );
});

export default CustomInput;

在这个例子中，CustomInput 是一个函数组件，它通过 forwardRef 接收外部的 ref。我们通过 useImperativeHandle 将自定义的方法（如 focus）暴露给父组件。

在父组件使用时：

import React, { useRef } from 'react';
import CustomInput from './CustomInput';

const ParentComponent = () => {
  const inputRef = useRef<{ focus: () => void }>(null);

  return (
    <div>
      <CustomInput ref={inputRef} label="Username" />
      <button onClick={() => inputRef.current?.focus()}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;