当前位置：首页 > React

react的refs如何取值

2026-03-31 15:58:21React

React Refs 取值方法

在 React 中，Refs 用于直接访问 DOM 节点或 React 组件实例。以下是几种常见的取值方法：

使用 React.createRef()

通过 React.createRef() 创建 ref 并附加到 React 元素上，通过 current 属性访问 DOM 节点或组件实例。

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

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

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

使用回调 Refs

通过传递一个函数作为 ref 属性，该函数接收 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}>Hello, World!</div>;
  }
}

使用 useRef Hook（函数组件）

在函数组件中，使用 useRef Hook 创建 ref 并通过 current 属性访问。

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

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

  useEffect(() => {
    console.log(myRef.current); // 访问 DOM 节点或组件实例
  }, []);

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

转发 Refs（访问子组件 DOM 节点）

通过 React.forwardRef 将 ref 传递给子组件的 DOM 节点。

react的refs如何取值

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

function ParentComponent() {
  const childRef = useRef(null);

  useEffect(() => {
    console.log(childRef.current); // 访问子组件的 DOM 节点
  }, []);

  return <ChildComponent ref={childRef} />;
}