在 React 中使用 useRef Hook 访问 JSX 元素-js教程-PHP中文网

在 React 中使用 useRef Hook 访问 JSX 元素

花韻仙語

发布： 2025-10-19 11:10:01

原创

671人浏览过

在 react 中使用 useref hook 访问 jsx 元素

useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象，其 current 属性可以存储任何可变值。它最常见的用途是直接访问 DOM 元素或 React 组件实例，从而进行命令式操作，例如聚焦、测量或触发动画。本文将详细介绍如何在 React 函数组件中使用 useRef 来获取并操作 JSX 元素。

在 React 应用开发中，我们通常通过状态（State）和属性（Props）来管理组件的数据和行为。然而，在某些特定场景下，我们需要直接与 DOM 元素进行交互，例如控制表单元素的焦点、播放或暂停媒体、测量元素尺寸等。这时，React 提供的 useRef Hook 就显得尤为重要。

理解 useRef 的作用

useRef Hook 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。当 ref 对象被附加到 JSX 元素上时，其 .current 属性将指向该 DOM 元素实例。

与 useState 不同，useRef 不会触发组件重新渲染。这意味着你可以安全地改变 ref.current 的值，而不会导致不必要的组件更新。

useRef 基本使用步骤

要通过 useRef 访问 JSX 元素，你需要遵循以下几个简单步骤：

1. 导入 useRef Hook

首先，在你的 React 组件文件的顶部导入 useRef：

问小白

免费使用DeepSeek满血版

5331

查看详情

import React, { useRef } from 'react';

登录后复制

2. 声明 Ref 变量

在你的函数组件内部，调用 useRef() 来声明一个 ref 变量。通常，我们会将其初始化为 null，因为在组件首次渲染时，它还没有被绑定到任何 DOM 元素：

function MyComponent() {
  const myElementRef = useRef(null); // 初始化为 null
  // ...
}

登录后复制

3. 将 Ref 绑定到 JSX 元素

接下来，将声明的 ref 变量通过 ref 属性绑定到你想要访问的 JSX 元素上。当 React 渲染这个元素时，myElementRef.current 将会被赋值为该 DOM 元素的实例：

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

  return (
    <div>
      <div ref={myElementRef}>这是一个我想要访问的元素</div>
      {/* 其他 JSX */}
    </div>
  );
}

登录后复制

4. 通过 ref.current 访问元素

一旦 ref 被绑定到元素上，你就可以通过 myElementRef.current 来访问该 DOM 元素。需要注意的是，ref.current 在组件首次渲染完成之前可能为 null，因此在访问它时最好进行非空检查。通常，你会在事件处理函数、useEffect Hook 或其他生命周期方法中访问 ref.current。

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

  const handleClick = () => {
    // 确保 ref.current 不为 null
    if (myElementRef.current) {
      // 现在你可以访问并操作这个 DOM 元素了
      console.log('元素内容:', myElementRef.current.textContent);
      myElementRef.current.style.backgroundColor = 'yellow';
    }
  };

  return (
    <div>
      <div ref={myElementRef}>这是一个我想要访问的元素</div>
      <button onClick={handleClick}>点击访问元素</button>
    </div>
  );
}

登录后复制

示例：在 React 组件中访问 DOM 元素

以下是一个完整的示例，展示了如何使用 useRef 来访问一个 div 元素，并在按钮点击时改变其背景颜色和打印其文本内容：

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

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

  // 可以在 useEffect 中访问 DOM 元素，确保它已经渲染到页面上
  useEffect(() => {
    if (targetElementRef.current) {
      console.log('组件加载后，元素已挂载:', targetElementRef.current);
      // 可以在这里进行一些初始化操作，例如聚焦
      // targetElementRef.current.focus();
    }
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  const highlightElement = () => {
    // 确保 ref.current 不为 null
    if (targetElementRef.current) {
      // 访问并操作 DOM 元素
      targetElementRef.current.style.backgroundColor = '#e0ffe0'; // 浅绿色高亮
      targetElementRef.current.style.border = '2px solid green';
      console.log('元素文本内容:', targetElementRef.current.textContent);
    }
  };

  const resetElement = () => {
    if (targetElementRef.current) {
      targetElementRef.current.style.backgroundColor = ''; // 移除背景色
      targetElementRef.current.style.border = ''; // 移除边框
    }
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      <h2>使用 useRef 访问 DOM 元素</h2>
      {/* 2. 将 ref 绑定到 JSX 元素 */}
      <p ref={targetElementRef} style={{ padding: '10px', border: '1px dashed blue' }}>
        这是我想要通过 Ref 访问和操作的段落元素。
      </p>
      <button onClick={highlightElement} style={{ marginRight: '10px' }}>
        高亮元素
      </button>
      <button onClick={resetElement}>
        重置样式
      </button>
      <p><em>请注意查看控制台输出和元素的样式变化。</em></p>
    </div>
  );
}

export default ElementAccessor;

登录后复制

注意事项与最佳实践

ref.current 的生命周期：
- 在组件首次渲染时，ref.current 可能为 null。只有当 React 将 ref 附加到 DOM 元素后，它才会有值。
- 在 useEffect 或事件处理函数中访问 ref.current 是安全的，因为此时组件已经挂载。
- 当组件卸载时，ref.current 会再次变为 null。
避免过度使用 useRef：
- useRef 主要用于需要直接命令式操作 DOM 的场景。
- 对于大部分 UI 交互和数据管理，应优先使用 React 的声明式范式，即通过状态（useState）和属性（props）来控制组件的行为和外观。
- 例如，如果只是为了显示/隐藏元素，通过状态来控制条件渲染或样式会是更好的选择。
Ref 的转发：
- 如果你需要将一个 ref 从父组件传递给子组件内部的某个 DOM 元素，你需要使用 forwardRef。这允许父组件直接获取子组件内部的 DOM 元素引用。
不要在渲染过程中读取或写入 ref.current：
- 在组件的渲染逻辑（即 return 语句块）中读取或写入 ref.current 可能会导致不可预测的行为，因为它可能在渲染期间发生变化。
- 应该在 useEffect 或事件处理函数中进行这些操作。

总结

useRef 是 React 提供的一个强大工具，它弥补了 React 声明式编程模型在需要直接操作 DOM 时的不足。通过正确地使用 useRef，开发者可以在不破坏 React 核心理念的前提下，实现对底层 DOM 元素的精确控制。理解其工作原理和适用场景，并遵循最佳实践，将有助于你构建更健壮、更高效的 React 应用。

以上就是在 React 中使用 useRef Hook 访问 JSX 元素的详细内容，更多请关注php中文网其它相关文章！