当前位置：首页 > React

react中如何拿到dom

2026-03-11 03:11:53React

使用 `useRef` Hook 获取 DOM 元素

在函数组件中，通过 useRef Hook 创建引用对象，并将其绑定到目标 DOM 元素的 ref 属性上。访问 ref.current 即可获取 DOM 实例。

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    console.log(divRef.current); // 输出 DOM 元素
  }, []);

  return <div ref={divRef}>目标元素</div>;
}

类组件中使用 `createRef`

在类组件中，通过 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}>目标元素</div>;
  }
}

回调 Refs 动态绑定

通过回调函数的方式动态绑定 ref，适用于需要灵活控制引用的场景。回调函数会在组件挂载或卸载时执行。

react中如何拿到dom

function MyComponent() {
  let divRef = null;

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

  useEffect(() => {
    console.log(divRef); // 输出 DOM 元素
  }, []);

  return <div ref={setDivRef}>目标元素</div>;
}

通过 `findDOMNode` 获取（不推荐）

ReactDOM.findDOMNode 可以获取组件的底层 DOM 节点，但官方已标记为过时，建议优先使用 ref。

import { findDOMNode } from 'react-dom';

class MyComponent extends React.Component {
  componentDidMount() {
    const node = findDOMNode(this);
    console.log(node); // 输出根 DOM 元素
  }

  render() {
    return <div>目标元素</div>;
  }
}

转发 Refs 获取子组件 DOM

通过 React.forwardRef 将父组件的 ref 转发到子组件的特定 DOM 元素上。

const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>子组件元素</div>;
});

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

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

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