当前位置：首页 > React

react里如何通过ref获取dom

2026-01-26 00:29:25React

通过 ref 获取 DOM 元素

在 React 中，可以通过 useRef Hook 或 createRef 方法获取 DOM 元素的引用。以下是具体实现方式：

使用 useRef Hook（函数组件）

react里如何通过ref获取dom

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

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

  useEffect(() => {
    console.log(divRef.current); // 获取 DOM 元素
    divRef.current.style.color = 'red'; // 操作 DOM
  }, []);

  return <div ref={divRef}>This is a DOM element</div>;
}

使用 createRef（类组件）

react里如何通过ref获取dom

import React, { Component, createRef } from 'react';

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

  componentDidMount() {
    console.log(this.divRef.current); // 获取 DOM 元素
    this.divRef.current.style.color = 'blue'; // 操作 DOM
  }

  render() {
    return <div ref={this.divRef}>This is a DOM element</div>;
  }
}

回调 ref 的用法

React 也支持通过回调函数的方式获取 ref：

function MyComponent() {
  let divRef = null;

  return (
    <div ref={(el) => { divRef = el; }}>
      {console.log(divRef)} // 在渲染后打印 DOM 元素
    </div>
  );
}

转发 ref 到子组件

如果需要获取子组件的 DOM 节点，可以使用 forwardRef：

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

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

  useEffect(() => {
    console.log(childRef.current); // 子组件的 DOM 元素
  }, []);

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