当前位置：首页 > React

react中ref如何

2026-01-23 17:26:28React

使用 `useRef` Hook 创建 ref

在函数组件中，可以通过 useRef Hook 创建一个 ref 对象。useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  return <div ref={myRef}>Hello, World!</div>;
}

访问 DOM 元素或组件实例

通过 ref 的 .current 属性可以访问绑定的 DOM 元素或类组件实例。对于函数组件，需要使用 forwardRef 和 useImperativeHandle 才能暴露方法。

const inputRef = useRef(null);

// 聚焦输入框
inputRef.current.focus();

在类组件中使用 `createRef`

类组件中可以使用 React.createRef() 创建 ref，并通过 this 访问。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

回调 ref

可以通过传递函数的方式创建 ref，该函数会在组件挂载或卸载时被调用，接收 DOM 元素或组件实例作为参数。

function MyComponent() {
  const setInputRef = (element) => {
    if (element) {
      element.focus();
    }
  };

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

转发 ref 到函数组件

函数组件默认不支持 ref，需要使用 React.forwardRef 将 ref 转发到内部 DOM 元素或类组件。

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 使用
const ref = useRef(null);
<FancyButton ref={ref}>Click me!</FancyButton>;

暴露自定义方法给父组件

通过 useImperativeHandle 可以自定义暴露给父组件的 ref 值，通常与 forwardRef 一起使用。

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

// 父组件调用
const ref = useRef(null);
ref.current.focus();