【React】详解如何获取 DOM 元素

在React中，操作DOM是一个常见但经常让人感到困惑的任务。虽然React鼓励使用虚拟DOM来优化性能和简化开发，但有时你仍然需要直接访问实际的DOM元素来完成特定任务。本文将详细介绍在React中获取DOM元素的各种方法，包括基本的 ref 使用、函数组件中的 ref，以及如何在React Hooks中利用 useRef。通过本文，你将全面了解如何在React中高效、安全地获取和操作DOM元素。

一、基础概念

1. 什么是DOM？

DOM（文档对象模型）是HTML和XML文档的编程接口。它将文档表示为一个由节点构成的树形结构，每个节点代表文档中的一个部分，比如元素、属性或文本。在React中，虽然大多数操作通过虚拟DOM进行，但有时你仍然需要直接操作实际的DOM节点。

2. 为什么需要获取DOM？

在React中，通常推荐使用虚拟DOM来处理用户界面更新，但某些情况下你可能需要直接访问DOM节点。例如：

• 当与第三方库集成时，需要直接操作DOM。
• 在进行动画时，可能需要访问实际的DOM节点。
• 实现自定义UI组件时，有时需要直接操作DOM。

二、使用 ref 获取DOM元素

1. 基本概念

在React中，ref 是一个特殊的属性，用于引用DOM节点或类组件实例。通过 ref，你可以在函数组件或类组件中访问实际的DOM元素。

2. 类组件中的 ref

在类组件中，可以使用 React.createRef() 创建 ref，并将其附加到一个DOM元素上：

import React, { Component } from 'react';class MyComponent extends Component {constructor(props) {super(props);this.myRef = React.createRef();}componentDidMount() {// 通过 this.myRef.current 访问实际的DOM节点console.log(this.myRef.current);}render() {return (<div><input ref={this.myRef} type="text" /></div>);}
}export default MyComponent;

在上面的示例中：

• React.createRef() 创建了一个 ref 对象。
• this.myRef 被附加到 <input> 元素上。
• 在 componentDidMount 生命周期方法中，你可以通过 this.myRef.current 访问到实际的DOM节点。

3. 函数组件中的 ref

在函数组件中，可以使用 useRef Hook 来创建 ref：

import React, { useRef, useEffect } from 'react';function MyComponent() {const inputRef = useRef(null);useEffect(() => {// 通过 inputRef.current 访问实际的DOM节点console.log(inputRef.current);}, []);return (<div><input ref={inputRef} type="text" /></div>);
}export default MyComponent;

在这个示例中：

• useRef 创建了一个 ref 对象，初始值为 null。
• inputRef 被附加到 <input> 元素上。
• useEffect Hook 在组件挂载后运行，可以通过 inputRef.current 访问到实际的DOM节点。

三、 ref 的进阶用法

1. 动态设置 ref

在某些情况下，你可能需要根据条件动态设置 ref：

import React, { useRef, useEffect } from 'react';function MyComponent({ isFocused }) {const inputRef = useRef(null);useEffect(() => {if (isFocused && inputRef.current) {inputRef.current.focus();}}, [isFocused]);return (<div><input ref={inputRef} type="text" /></div>);
}export default MyComponent;

在这个示例中：

• useEffect 会在 isFocused 变化时执行。
• 如果 isFocused 为 true，则会使 inputRef.current 获取焦点。

2. ref 与函数组件的结合

你也可以将 ref 传递给子组件：

import React, { forwardRef, useRef, useImperativeHandle } from 'react';const ChildComponent = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({alertMessage() {alert('Hello from ChildComponent!');}}));return <div>Child Component</div>;
});function ParentComponent() {const childRef = useRef(null);const handleClick = () => {if (childRef.current) {childRef.current.alertMessage();}};return (<div><ChildComponent ref={childRef} /><button onClick={handleClick}>Call Child Component</button></div>);
}export default ParentComponent;

在这个示例中：

• ChildComponent 使用 forwardRef 和 useImperativeHandle 定义了可供父组件调用的 ref 方法。
• ParentComponent 可以通过 childRef.current.alertMessage() 调用子组件中的方法。

四、处理特殊情况

1. 多个 ref 的处理

当需要在同一个组件中管理多个 ref 时，可以使用多个 useRef 或创建一个对象来存储多个 ref：

import React, { useRef, useEffect } from 'react';function MyComponent() {const refs = {inputRef1: useRef(null),inputRef2: useRef(null)};useEffect(() => {console.log(refs.inputRef1.current);console.log(refs.inputRef2.current);}, []);return (<div><input ref={refs.inputRef1} type="text" placeholder="Input 1" /><input ref={refs.inputRef2} type="text" placeholder="Input 2" /></div>);
}export default MyComponent;

在这个示例中：

• refs 对象存储了多个 ref。
• 可以通过 refs.inputRef1.current 和 refs.inputRef2.current 访问不同的DOM节点。

2. ref 与条件渲染

在条件渲染的情况下，可能需要处理 ref 的存在性：

import React, { useRef, useEffect, useState } from 'react';function MyComponent() {const [isVisible, setIsVisible] = useState(true);const inputRef = useRef(null);useEffect(() => {if (isVisible && inputRef.current) {console.log('Input is visible:', inputRef.current);}}, [isVisible]);return (<div>{isVisible && <input ref={inputRef} type="text" />}<button onClick={() => setIsVisible(!isVisible)}>Toggle Input</button></div>);
}export default MyComponent;

在这个示例中：

• 使用 useState 控制 <input> 的显示和隐藏。
• useEffect 检查 isVisible 和 inputRef.current 的状态来确保 ref 只在 <input> 可见时有效。