React组件中非事件监听方式获取DOM元素：useRef实践指南-js教程-PHP中文网

React组件中非事件监听方式获取DOM元素：useRef实践指南

心靈之曲

发布： 2025-10-10 13:30:28

原创

689人浏览过

React组件中非事件监听方式获取DOM元素：useRef实践指南

本文详细介绍了在React组件中，如何在不依赖事件监听器（如onChange）的情况下，通过useEffect钩子直接获取并操作DOM元素。针对需要在组件挂载后立即访问DOM属性（例如实现文本区域的自动高度调整）的场景，我们将深入探讨useRef的使用方法，并提供具体的代码示例和实践建议，帮助开发者高效地管理和操作组件的底层DOM元素。

在react开发中，我们通常倡导使用声明式的方式构建用户界面，尽量避免直接操作dom。然而，在某些特定场景下，直接访问底层dom元素是必要的，例如：与需要dom引用的第三方库集成、管理表单元素的焦点、控制媒体播放，或者像本例中需要根据内容动态调整文本区域（textarea）的高度。

传统的DOM操作方法，如document.getElementById，在React组件中虽然可以工作，但它不符合React的组件化和声明式编程范式，并且可能导致难以预测的时序问题，尤其是在组件生命周期钩子中。当我们需要在组件挂载后，不通过用户交互事件（如onChange、onClick）来获取DOM元素并执行操作时，useEffect钩子结合useRef就成为了React中处理此类需求的标准且优雅的解决方案。

使用 useRef 钩子获取 DOM 元素

React的useRef钩子提供了一种在函数组件中创建可变引用（ref）的方式。这个引用在组件的整个生命周期中都会保持不变，并且可以通过ref.current属性直接访问到它所关联的DOM元素或组件实例。

useRef 的基本用法步骤：

导入 useRef： 首先，从react库中导入useRef钩子。
```
import { useState, useEffect, useRef } from 'react';
```
登录后复制
创建 Ref 对象： 在函数组件内部调用useRef()来创建一个ref对象。通常，我们会将其初始化为null。
```
function MyComponent() {
    const myElementRef = useRef(null);
    // ...
}
```
登录后复制
关联 Ref 到 JSX 元素： 将创建的ref对象作为ref属性传递给需要获取其DOM的JSX元素。
```
<input ref={myElementRef} type="text" />
```
登录后复制
当组件挂载后，React会将该DOM元素的引用赋值给myElementRef.current。
在 useEffect 中访问 DOM 元素： 在useEffect钩子中，myElementRef.current将指向实际的DOM元素，此时就可以对其进行直接操作。useEffect是执行副作用的理想场所，因为它在DOM更新后运行。

示例：实现文本区域的自动高度调整

沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

查看详情

以下示例展示了如何在ChatInput组件中使用useRef和useEffect来实现一个根据内容自动调整高度的textarea，而无需依赖用户输入事件。

import { useState, useEffect, useRef } from 'react';
import { Container, InputGroup, Form } from 'react-bootstrap'; // 假设使用了react-bootstrap

// 文本区域的样式定义
const textareaStyle = {
    resize: "none", // 禁用用户手动调整大小
    overflow: "hidden", // 隐藏滚动条
    minHeight: "50px", // 最小高度
    maxHeight: "1000px" // 最大高度
};

function ChatInput(props) {
    // 使用useState管理文本内容，初始化为props.answer或空字符串
    const [text, setText] = useState(props.answer || '');
    // 创建一个ref来引用textarea DOM元素
    const textareaRef = useRef(null);

    // useEffect用于在props.answer变化时更新text状态
    useEffect(() => {
        setText(props.answer || '');
    }, [props.answer]);

    // useEffect用于在组件挂载后或text内容变化时调整textarea高度
    useEffect(() => {
        // 确保textareaRef.current已指向DOM元素
        if (textareaRef.current) {
            // 步骤1: 将高度重置为'auto'，以便正确计算新的scrollHeight
            // 这一步是关键，它允许浏览器重新评估文本框的自然高度
            textareaRef.current.style.height = 'auto';
            // 步骤2: 根据元素的scrollHeight（包含内容的实际高度）设置高度
            textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
        }
    }, [text]); // 依赖text，当文本内容变化时重新执行此效果

    return (
        <Container style={{ paddingTop: '.5rem' }}>
            <InputGroup>
                <InputGroup.Text>Bot</InputGroup.Text>
                <Form.Control
                    ref={textareaRef} // 将textareaRef关联到Form.Control组件
                    style={textareaStyle}
                    as="textarea" // 指定渲染为textarea
                    value={text}
                    aria-label="Chat Input"
                    // 如果需要用户输入，可以添加onChange事件处理函数
                    // onChange={(e) => setText(e.target.value)}
                />
            </InputGroup>
        </Container>
    );
}

export default ChatInput;

登录后复制

在上述代码中：

我们通过const textareaRef = useRef(null);创建了一个ref对象。
将textareaRef作为ref属性传递给Form.Control组件，使其能够引用底层的textarea DOM元素。
在第二个useEffect钩子中，我们首先检查textareaRef.current是否已存在（即组件已挂载且DOM元素可用）。
如果存在，我们便可以安全地访问并修改textareaRef.current的style.height属性，利用scrollHeight来计算并设置文本框的实际内容高度。
此useEffect的依赖项是text状态，这意味着每当text内容更新时（无论是通过props.answer的改变还是用户输入），textarea的高度都会被重新计算和调整，从而实现自动高度调整功能。

注意事项

ref.current 的可用性： ref.current在组件首次渲染时可能为null，但在useEffect回调函数执行时，它通常已经指向了DOM元素。因此，在使用ref.current之前，务必进行非空检查，例如if (textareaRef.current)，以避免潜在的运行时错误。
避免过度使用 DOM 操作： 尽管useRef提供了直接操作DOM的能力，但它应被视为一种“逃生舱口”。在大多数情况下，React的声明式更新机制和状态管理足以满足需求。只有当确实需要直接访问或修改DOM属性，且React的状态/props管理无法优雅实现时，才考虑使用useRef。
性能考虑： 频繁地直接操作DOM可能会影响应用的性能。对于文本区域的自动高度调整，如果文本内容频繁变化，确保你的调整逻辑是高效的，例如，避免不必要的重复计算或DOM操作。
useEffect 的依赖数组： useEffect的依赖数组至关重要。如果你的DOM操作依赖于组件的props或state，请务必将它们包含在依赖数组中，以确保在这些值变化时重新执行效果。如果只需要在组件挂载时执行一次（例如，设置初始焦点），则使用空数组[]作为依赖。
与第三方库集成： useRef在与需要直接访问DOM元素的第三方JavaScript库（如一些图表库、拖放库或动画库）集成时非常有用，因为它提供了一个稳定的DOM引用。

总结

useRef是React函数组件中用于获取和管理DOM元素引用的强大工具。它提供了一种在不依赖事件监听器的情况下，通过useEffect钩子在组件挂载后直接访问和操作DOM元素的有效途径。通过合理利用useRef，开发者可以在需要直接DOM交互的特定场景下，保持React应用的声明式优势，同时解决实际的UI挑战，如实现文本区域的自动高度调整功能。理解并掌握useRef的用法，是成为一名高效React开发者的关键一步。

以上就是React组件中非事件监听方式获取DOM元素：useRef实践指南的详细内容，更多请关注php中文网其它相关文章！