当前位置：首页 > React

react 如何获取dom

2026-02-26 02:13:08React

获取 DOM 的方法

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

使用 useRef 钩子

useRef 是 React Hooks 中用于创建 ref 的方法。适用于函数组件。

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

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

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

  return <div ref={myRef}>Hello World</div>;
}

使用 createRef

createRef 是类组件中常用的方法。

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

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

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

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

回调 Refs

回调 ref 是一种更灵活的方式，允许在 ref 附加或分离时执行自定义逻辑。

import React, { useEffect } from 'react';

function MyComponent() {
  let myRef = null;

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

  return <div ref={(node) => (myRef = node)}>Hello World</div>;
}

在类组件中使用字符串 Refs（不推荐）

字符串 ref 是旧版 React 中的语法，现已不推荐使用，但在某些旧代码中可能仍然存在。

class MyComponent extends Component {
  componentDidMount() {
    console.log(this.refs.myRef); // 输出 DOM 节点
  }

  render() {
    return <div ref="myRef">Hello World</div>;
  }
}

获取子组件的 DOM

如果需要获取子组件的 DOM 节点，可以通过 forwardRef 将 ref 转发到子组件。

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

const ChildComponent = forwardRef((props, ref) => {
  return <div ref={ref}>Child Component</div>;
});

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

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

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