当前位置：首页 > React

react refs如何使用

2026-02-26 06:52:55React

React Refs 的基本概念

Refs 提供了一种直接访问 DOM 节点或 React 组件实例的方式。通常用于需要直接操作 DOM 的场景，如焦点管理、动画触发或第三方库集成。

创建 Refs

使用 React.createRef() 创建 ref 对象，通常在组件的构造函数中初始化：

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

绑定 Refs

通过 ref 属性将 ref 对象附加到 DOM 元素或类组件上：

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

访问 Refs

通过 ref 对象的 current 属性访问绑定的 DOM 节点或组件实例：

componentDidMount() {
  console.log(this.myRef.current); // 输出 DOM 节点或组件实例
}

函数组件中的 Refs

函数组件使用 useRef Hook 创建 ref：

import React, { useRef } from 'react';

function FunctionComponent() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

回调 Refs

另一种方式是使用回调函数作为 ref，适用于动态绑定或需要在 ref 变化时执行逻辑的场景：

class CallbackRefExample extends React.Component {
  setRef = (element) => {
    this.customRef = element;
  };

  render() {
    return <div ref={this.setRef}>Callback Ref</div>;
  }
}

转发 Refs（Forwarding Refs）

通过 React.forwardRef 将 ref 传递给子组件，常用于高阶组件或封装通用逻辑的组件：

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

// 父组件使用
class Parent extends React.Component {
  buttonRef = React.createRef();

  render() {
    return <FancyButton ref={this.buttonRef}>Click</FancyButton>;
  }
}