当前位置：首页 > React

react如何获取真实dom

2026-03-10 22:49:07React

获取真实 DOM 的方法

在 React 中，通常推荐使用虚拟 DOM 进行渲染优化，但某些场景（如集成第三方库、测量元素尺寸等）需要直接访问真实 DOM。以下是几种常用方法：

使用 `ref` 属性

通过 createRef 或 useRef 创建引用，绑定到目标元素上，通过 current 属性访问真实 DOM。

类组件示例：

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

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

  render() {
    return <div ref={this.myRef}>目标元素</div>;
  }
}

函数组件示例：

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

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

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

回调形式的 `ref`

通过传递函数给 ref 属性，在回调中获取 DOM 节点。

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

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

通过 `findDOMNode`（不推荐）

React 提供了 ReactDOM.findDOMNode，但官方不推荐使用，因其可能破坏组件封装性。

import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
    console.log(node); // 输出组件根 DOM 节点
  }

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

动态多元素绑定

通过 ref 列表或 Map 结构管理多个 DOM 节点。

react如何获取真实dom

function MyList() {
  const items = ['A', 'B', 'C'];
  const refs = React.useRef(new Map());

  React.useEffect(() => {
    refs.current.forEach((node, key) => {
      console.log(key, node); // 输出每个节点的键和 DOM 对象
    });
  }, []);

  return (
    <ul>
      {items.map((item) => (
        <li
          key={item}
          ref={(node) => {
            if (node) refs.current.set(item, node);
            else refs.current.delete(item);
          }}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}