当前位置：首页 > React

react ref 如何使用

2026-03-31 10:18:26React

React Refs 的基本概念

Refs 是 React 提供的一种访问 DOM 节点或 React 组件实例的方式。通常在 React 的数据流中，父子组件通过 props 进行通信，但在某些情况下需要直接操作 DOM 或组件实例，这时可以使用 Refs。

创建 Refs

使用 React.createRef() 可以创建一个 Ref 对象。通常在组件的构造函数中创建 Ref，并将其赋值给实例属性，以便在整个组件中访问。

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

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

访问 Refs

通过 Ref 对象的 current 属性可以访问到绑定的 DOM 节点或组件实例。例如，在组件挂载后，可以通过 this.myRef.current 访问到对应的 DOM 节点。

componentDidMount() {
  console.log(this.myRef.current); // 输出绑定的 DOM 节点
}

回调 Refs

除了 React.createRef()，还可以使用回调 Refs。回调 Refs 是一个函数，接收 DOM 节点或组件实例作为参数，可以更灵活地控制 Refs 的赋值。

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

  componentDidMount() {
    console.log(this.myRef); // 输出绑定的 DOM 节点
  }

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

函数组件中的 Refs

在函数组件中，可以使用 useRef Hook 来创建 Refs。useRef 返回一个可变的 Ref 对象，其 current 属性被初始化为传入的参数。

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

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

  useEffect(() => {
    console.log(myRef.current); // 输出绑定的 DOM 节点
  }, []);

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

Refs 与 forwardRef

如果需要将 Ref 传递给子组件，可以使用 React.forwardRef。forwardRef 接收一个渲染函数，该函数的第二个参数即为传递的 Ref。

const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>{props.children}</div>;
});

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

  componentDidMount() {
    console.log(this.childRef.current); // 输出子组件的 DOM 节点
  }

  render() {
    return <ChildComponent ref={this.childRef}>Hello</ChildComponent>;
  }
}