当前位置：首页 > React

react中如何得到div的节点

2026-01-25 18:11:39React

在React中获取DOM节点（如div）可以通过以下几种方法实现：

使用`useRef` Hook（函数组件推荐）

通过useRef创建一个引用，并将其附加到目标div的ref属性上。引用对象的current属性会指向该DOM节点。

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

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

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

  return <div ref={divRef}>需要获取的节点</div>;
}

使用回调形式的`ref`（函数组件）

通过回调函数形式的ref，在DOM挂载或卸载时获取节点引用。

function MyComponent() {
  const handleRef = (node) => {
    if (node) {
      console.log(node); // 输出div的DOM节点
    }
  };

  return <div ref={handleRef}>回调ref示例</div>;
}

使用`React.createRef`（类组件）

在类组件中通过React.createRef创建引用，并绑定到div的ref属性。

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

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

  render() {
    return <div ref={this.divRef}>类组件示例</div>;
  }
}

通过事件触发获取

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

react中如何得到div的节点

function MyComponent() {
  const handleClick = (event) => {
    console.log(event.target); // 输出点击的div节点
  };

  return <div onClick={handleClick}>点击获取节点</div>;
}