当前位置：首页 > React

react如何获取dom节点

2026-01-24 04:56:27React

使用 ref 获取 DOM 节点

在 React 中，可以通过 ref 直接访问 DOM 节点。使用 useRef Hook 创建一个 ref 对象，并将其附加到目标元素的 ref 属性上。ref 对象的 current 属性会指向实际的 DOM 节点。

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

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

  useEffect(() => {
    console.log(divRef.current); // 输出实际的 DOM 节点
  }, []);

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

回调 ref 获取 DOM 节点

另一种方式是使用回调函数形式的 ref。将函数传递给元素的 ref 属性，React 会在组件挂载或卸载时调用该函数，并将 DOM 节点作为参数传入。

react如何获取dom节点

function MyComponent() {
  let divRef = null;

  const setDivRef = (element) => {
    divRef = element;
  };

  useEffect(() => {
    if (divRef) {
      console.log(divRef); // 输出实际的 DOM 节点
    }
  }, []);

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

类组件中获取 DOM 节点

在类组件中，可以通过 React.createRef() 创建 ref，并将其附加到目标元素上。

react如何获取dom节点

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

  componentDidMount() {
    console.log(this.divRef.current); // 输出实际的 DOM 节点
  }

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

通过事件获取 DOM 节点

在事件处理函数中，可以通过 event.target 直接访问触发事件的 DOM 节点。

function MyComponent() {
  const handleClick = (event) => {
    console.log(event.target); // 输出触发事件的 DOM 节点
  };

  return <button onClick={handleClick}>Click Me</button>;
}

使用 document 方法获取 DOM 节点

虽然不推荐直接操作 DOM，但在某些情况下可以通过 document.getElementById 或类似方法获取 DOM 节点。

function MyComponent() {
  useEffect(() => {
    const element = document.getElementById('my-div');
    console.log(element); // 输出对应的 DOM 节点
  }, []);

  return <div id="my-div">Hello, World!</div>;
}