当前位置：首页 > React

react中如何获取dom

2026-03-11 07:16:49React

获取 DOM 的方法

在 React 中，可以通过 ref 来获取 DOM 元素。ref 提供了一种直接访问 DOM 节点或 React 组件实例的方式。

使用 useRef Hook 创建 ref：

react中如何获取dom

import React, { useRef } from 'react';

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

  const handleClick = () => {
    console.log(myRef.current); // 输出 DOM 节点
  };

  return (
    <div ref={myRef} onClick={handleClick}>
      Click me
    </div>
  );
}

类组件中的 ref

在类组件中，可以使用 React.createRef() 创建 ref：

react中如何获取dom

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

  handleClick = () => {
    console.log(this.myRef.current); // 输出 DOM 节点
  };

  render() {
    return (
      <div ref={this.myRef} onClick={this.handleClick}>
        Click me
      </div>
    );
  }
}

回调 ref

React 也支持回调 ref，这种方式在 ref 的值发生变化时会被调用：

function MyComponent() {
  let myRef = null;

  const setRef = (element) => {
    myRef = element;
  };

  const handleClick = () => {
    console.log(myRef); // 输出 DOM 节点
  };

  return (
    <div ref={setRef} onClick={handleClick}>
      Click me
    </div>
  );
}

获取子组件的 DOM

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

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

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

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

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