当前位置：首页 > React

react refs 如何使用

2026-01-15 11:28:38React

React Refs 的基本概念

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

创建 Refs

使用 React.createRef() 可以创建一个 Ref 对象。通常在组件的构造函数中初始化 Ref，并将其附加到 React 元素的 ref 属性上。

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

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

访问 Refs

通过 Ref 对象的 current 属性可以访问到附加的 DOM 节点或组件实例。

react refs 如何使用

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

回调 Refs

除了 React.createRef()，还可以使用回调函数的方式创建 Refs。回调函数会在组件挂载或卸载时被调用，接收 DOM 节点或组件实例作为参数。

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

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

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

函数组件中的 Refs

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

react refs 如何使用

function MyFunctionalComponent() {
  const myRef = React.useRef(null);

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

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

转发 Refs

通过 React.forwardRef 可以将 Ref 自动传递给子组件。这在需要访问子组件的 DOM 节点时非常有用。

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

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

  componentDidMount() {
    console.log(this.buttonRef.current); // 输出 button DOM 节点
  }

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