当前位置：首页 > React

react中如何获取dom

2026-01-24 22:24:44React

获取 DOM 的方法

在 React 中，可以通过 useRef 或回调 Refs 的方式获取 DOM 节点。以下是具体实现方法：

使用 `useRef` Hook

useRef 是 React Hooks 提供的一种方式，可以方便地获取 DOM 节点或存储可变值。以下是示例代码：

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} type="text" />;
}

useRef 创建的 ref 对象通过 ref 属性附加到目标 DOM 节点后，可以通过 ref.current 访问该节点。

使用回调 Refs

回调 Refs 是一种更灵活的方式，允许在 ref 被设置或清除时执行自定义逻辑。以下是示例代码：

import React, { useEffect } from 'react';

function MyComponent() {
  let inputRef = null;

  useEffect(() => {
    if (inputRef) {
      inputRef.focus();
    }
  }, []);

  return <input ref={el => inputRef = el} type="text" />;
}

回调 Refs 通过函数接收 DOM 节点作为参数，可以手动将其赋值给变量或其他逻辑处理。

类组件中的 `React.createRef`

在类组件中，可以通过 React.createRef 创建 ref 并附加到 DOM 节点：

import React from 'react';

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

  componentDidMount() {
    if (this.inputRef.current) {
      this.inputRef.current.focus();
    }
  }

  render() {
    return <input ref={this.inputRef} type="text" />;
  }
}