如何使用 useRef 在 React 中获取 DOM 元素引用-js教程-PHP中文网

如何使用 useRef 在 React 中获取 DOM 元素引用

花韻仙語

发布： 2025-10-19 13:27:01

原创

478人浏览过

如何使用 useref 在 react 中获取 dom 元素引用

本文将深入探讨 React 中 `useRef` 钩子的核心功能与用法，指导开发者如何利用它直接访问 DOM 元素，进行必要的命令式操作。我们将涵盖 `useRef` 的基本设置、如何通过 `ref.current` 获取元素实例，以及如何进一步查找引用元素内部的子元素，并提供实用的代码示例和最佳实践，帮助您在特定场景下有效管理和操作 DOM。

在 React 应用开发中，我们通常遵循声明式编程范式，通过状态管理和组件渲染来更新 UI。然而，在某些特定场景下，我们可能需要直接与底层 DOM 元素进行交互，例如管理焦点、播放媒体、触发动画或集成第三方 DOM 库。此时，React 提供的 useRef 钩子就成为了实现这一目标的关键工具。

理解 useRef 钩子

useRef 是 React 提供的一个 Hook，它允许你在函数组件中创建一个可变的引用对象。这个引用对象在组件的整个生命周期中都会保持不变。最常见的用途是访问 DOM 元素，但它也可以用于存储任何可变值，且在值更新时不会触发组件重新渲染。

当你将一个 ref 对象绑定到 JSX 元素上时，React 会将该元素的 DOM 实例赋值给 ref 对象的 .current 属性。

useRef 的基本用法

使用 useRef 访问 DOM 元素通常遵循以下步骤：

导入 useRef： 首先，从 react 包中导入 useRef 钩子。
```
import React, { useRef } from 'react';
```
登录后复制
声明 ref 变量： 在函数组件内部，调用 useRef() 来创建一个 ref 对象。useRef() 接受一个可选的初始值作为参数，通常在用于 DOM 引用时初始化为 null。
```
const myElementRef = useRef(null);
```
登录后复制
将 ref 绑定到 JSX 元素： 将创建的 ref 对象通过 ref 属性绑定到你想要引用的 JSX 元素上。
```
<div ref={myElementRef}>这是一个需要被引用的元素</div>
```
登录后复制
通过 ref.current 访问元素： 一旦组件渲染完成，你就可以通过 myElementRef.current 属性访问到对应的 DOM 元素实例。

以下是一个完整的示例，演示了如何使用 useRef 获取一个 div 元素的引用，并在按钮点击时打印其文本内容：

Playground AI

AI图片生成和修图

108

查看详情

import React, { useRef } from 'react';

function MyComponent() {
  // 1. 声明一个 ref 变量
  const contentDivRef = useRef(null);

  const handleAccessElement = () => {
    // 4. 通过 .current 属性访问 DOM 元素
    const element = contentDivRef.current;
    if (element) {
      console.log('引用的元素:', element);
      console.log('元素内容:', element.textContent);
      // 可以在这里对元素进行任何 DOM 操作
      element.style.backgroundColor = 'yellow';
    } else {
      console.log('元素尚未渲染或引用失效。');
    }
  };

  return (
    <div>
      {/* 3. 将 ref 绑定到 JSX 元素 */}
      <div ref={contentDivRef} style={{ padding: '10px', border: '1px solid gray' }}>
        这是我们想要通过 useRef 访问的 DOM 元素。
      </div>
      <button onClick={handleAccessElement}>访问并操作元素</button>
    </div>
  );
}

export default MyComponent;

登录后复制

注意事项：

ref.current 在组件初次渲染时尚未赋值，因为它需要等待 DOM 元素被创建并挂载。因此，在访问 ref.current 之前，务必进行空值检查（if (ref.current)），以避免潜在的运行时错误。
通常在 useEffect 钩子中进行依赖于 DOM 元素的操作，以确保元素已经挂载到 DOM 上。

访问 ref 引用元素的子元素

在某些情况下，你可能不仅需要访问一个父级元素，还需要在其内部查找特定的子元素。例如，你可能有一个表单容器的 ref，但需要访问其中某个特定 ID 的输入框。

直接在 ref.current 上调用 getElementById 是不正确的，因为 getElementById 是 Document 对象的方法，而不是通用的 DOM 元素方法。然而，你可以使用 querySelector 或 querySelectorAll 等方法，它们可以在任何 DOM 元素上调用，用于查找其后代元素。

import React, { useRef } from 'react';

function MyFormContainer() {
  const formContainerRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const container = formContainerRef.current;
    if (container) {
      // 在引用的父元素内部查找 ID 为 "first_name" 的子元素
      const firstNameInput = container.querySelector('#first_name');
      const emailInput = container.querySelector('input[type="email"]'); // 查找 email 类型的 input

      if (firstNameInput) {
        console.log('名:', firstNameInput.value);
        firstNameInput.style.border = '2px solid green';
      }
      if (emailInput) {
        console.log('邮箱:', emailInput.value);
      }
    }
  };

  return (
    <form ref={formContainerRef} onSubmit={handleSubmit} style={{ border: '1px solid #ccc', padding: '20px' }}>
      <label htmlFor="first_name">名:</label>
      <input type="text" id="first_name" defaultValue="张" /><br/><br/>

      <label htmlFor="last_name">姓:</label>
      <input type="text" id="last_name" defaultValue="三" /><br/><br/>

      <label htmlFor="email">邮箱:</label>
      <input type="email" id="email" defaultValue="zhangsan@example.com" /><br/><br/>

      <button type="submit">提交表单</button>
    </form>
  );
}

export default MyFormContainer;

登录后复制

在这个例子中，formContainerRef.current 获取到的是

元素的 DOM 实例。然后，我们在这个实例上调用 querySelector('#first_name') 来查找其内部 ID 为 first_name 的元素。

特别注意事项：处理 Iframe 内容

如果你的目标元素位于一个 iframe 内部，情况会更加复杂。useRef 绑定到元素本身，只会给你 iframe 的 DOM 元素。要访问 iframe 内部的文档内容，你需要通过 iframe.contentWindow.document 来获取 iframe 的 Document 对象。一旦你有了这个 Document 对象，就可以在其上使用 getElementById 或 querySelector 来查找 iframe 内部的元素。

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

function IframeContentAccess() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframeElement = iframeRef.current;
    if (iframeElement) {
      // 确保 iframe 内容已加载
      iframeElement.onload = () => {
        try {
          const iframeDoc = iframeElement.contentWindow.document;
          const targetElement = iframeDoc.getElementById('first_name');
          if (targetElement) {
            console.log('Iframe 内部的元素:', targetElement);
            targetElement.style.backgroundColor = 'lightblue';
            targetElement.value = '已修改';
          } else {
            console.log('未在 iframe 内部找到 ID 为 "first_name" 的元素。');
          }
        } catch (e) {
          console.error('无法访问 iframe 内容，可能存在跨域问题:', e);
        }
      };
    }
  }, []); // 空数组表示只在组件挂载时运行一次

  return (
    <div>
      <h2>Iframe 内容访问示例</h2>
      <iframe
        ref={iframeRef}
        title="Embedded Form"
        srcDoc={`
          <form>
            <label for="first_name">名:</label>
            <input type="text" id="first_name" value="原始值" /><br/><br/>
            <label for="last_name">姓:</label>
            <input type="text" id="last_name" value="原始值" />
          </form>
        `}
        style={{ width: '100%', height: '200px', border: '1px solid blue' }}
      ></iframe>
      <p>请查看控制台输出和 iframe 内容变化。</p>
    </div>
  );
}

export default IframeContentAccess;

登录后复制

重要提示： 访问 iframe 内容可能会受到同源策略（Same-Origin Policy）的限制。如果 iframe 的 src 属性指向不同源的 URL，你将无法通过 JavaScript 访问其内部文档，除非目标 iframe 明确设置了 Access-Control-Allow-Origin 头。

最佳实践与注意事项

避免过度使用 useRef： 尽管 useRef 提供了直接操作 DOM 的能力，但它打破了 React 的声明式范式。应优先考虑通过状态和 props 来管理 UI 更新。仅在确实需要进行命令式操作时才使用 useRef。
空值检查： 始终在使用 ref.current 之前检查它是否为 null。
useEffect 中的 DOM 操作： 如果你的 DOM 操作需要在组件渲染之后执行，或者依赖于其他状态/props，请将其放在 useEffect 钩子中。这样可以确保 DOM 元素已经挂载，并且可以清理副作用。
清理工作： 如果 useRef 关联了需要清理的资源（例如事件监听器或第三方库的初始化），请在 useEffect 的返回函数中进行清理。

总结

useRef 是 React 提供的一个强大而灵活的钩子，它允许开发者在函数组件中获取对 DOM 元素的直接引用，从而进行命令式操作。无论是简单的元素访问、在其内部查找子元素，还是处理更复杂的 iframe 内容，理解 useRef 的工作原理及其配合标准 DOM API 的使用方式都至关重要。正确地运用 useRef，可以帮助你解决特定的交互需求，同时保持 React 应用的健壮性和可维护性。记住，在使用 useRef 时，务必遵循最佳实践，避免不必要的直接 DOM 操作，优先利用 React 的声明式特性。

以上就是如何使用 useRef 在 React 中获取 DOM 元素引用的详细内容，更多请关注php中文网其它相关文章！