React获取DOM元素全解析：掌握Refs与Hook核心用法
一、React中获取DOM元素的背景与核心思想
1.1 为什么需要获取DOM元素
React的核心思想是声明式渲染与虚拟DOM, 通常情况下我们不需要直接操作真实DOM。但在某些特定场景下, 我们仍然需要直接获取真实的DOM节点来进行命令式操作。这些场景包括但不限于: (1) 管理焦点, 文本选择或媒体播放; (2) 触发强制动画; (3) 集成第三方DOM库 (如D3.js, Chart.js等)。
1.2 Refs的核心概念与工作流程
React提供了Refs来访问真实DOM节点或React组件实例。Refs是一个可变对象, 其current属性被初始化为传入的初始值。当Ref被挂载到DOM节点上时, React会将该节点的引用赋值给ref.current; 当组件卸载时, React会将其重置为null。以下是Refs工作流程的直观展示:
1.3 获取DOM元素的几种主流方式
在React中获取DOM元素主要有以下几种主流方式: (1) 函数组件中使用useRef Hook; (2) 类组件中使用React.createRef; (3) 使用回调Refs; (4) 使用forwardRef转发Ref给子组件。下面我们将逐一详细展开。
二、函数组件中获取DOM元素
2.1 使用useRef Hook创建Ref对象
在函数组件中, 获取DOM元素最推荐的方式是使用useRef Hook。useRef返回一个可变的ref对象, 其current属性被初始化为传入的参数。具体操作步骤如下:
- 引入useRef并创建ref对象。
- 将ref对象绑定到DOM元素的ref属性。
- 在事件处理函数中通过ref.current访问真实DOM。
代码示例如下:
import React, { useRef } from 'react'; function TextInput() { const inputRef = useRef(null); const focusInput = () => { inputRef.current.focus(); }; return ( <div> <input ref={inputRef} type="text" /> <button onClick={focusInput}>聚焦输入框</button> </div> ); }2.2 useRef结合回调与副作用操作
有时我们需要在组件挂载后立即对DOM元素进行测量或操作, 这时可以结合useEffect使用。操作步骤如下:
- 创建ref对象并绑定到目标DOM。
- 在useEffect的回调函数中访问ref.current。
- 执行如获取宽度等DOM测量操作。
代码示例如下:
import React, { useRef, useEffect } from 'react'; function MeasureBox() { const divRef = useRef(null); useEffect(() => { if (divRef.current) { const width = divRef.current.getBoundingClientRect().width; console.log('DOM元素宽度:', width); } }, []); return <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'skyblue' }}>测量我</div>; }2.3 函数组件中转发Ref (forwardRef)
默认情况下, 函数组件没有实例, 因此无法直接通过ref属性获取函数组件内部的DOM。如果需要让父组件获取子函数组件内的DOM, 需要使用React.forwardRef进行转发。操作步骤如下:
- 使用React.forwardRef包裹子函数组件。
- 将传入的ref参数绑定到子组件内部的DOM元素。
- 在父组件中创建ref并传递给子组件。
代码示例如下:
import React, { useRef, forwardRef } from 'react'; const CustomInput = forwardRef((props, ref) => { return <input ref={ref} type="text" placeholder={props.placeholder} />; }); function ParentComponent() { const childRef = useRef(null); const handleClick = () => { childRef.current.focus(); }; return ( <div> <CustomInput ref={childRef} placeholder="请输入" /> <button onClick={handleClick}>聚焦子组件输入框</button> </div> ); }三、类组件中获取DOM元素
3.1 使用React.createRef获取DOM
在类组件中, 推荐使用React.createRef来创建Ref对象。操作步骤如下:
- 在构造函数中通过React.createRef()创建ref对象。
- 将ref对象绑定到render方法返回的DOM元素上。
- 在componentDidMount等生命周期中通过this.myRef.current访问DOM。
代码示例如下:
import React, { Component } from 'react'; class AutoFocusInput extends Component { constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { this.inputRef.current.focus(); } render() { return <input ref={this.inputRef} type="text" />; } }3.2 使用回调Refs获取DOM
回调Refs是另一种获取DOM的方式。操作步骤如下:
- 编写一个接收DOM节点作为参数的函数。
- 将该函数作为ref属性传递给DOM元素。
- 在函数内部将DOM节点存储到组件实例的属性上以供后续使用。
代码示例如下:
import React, { Component } from 'react'; class CallbackRefInput extends Component { constructor(props) { super(props); this.setInputRef = element => { this.inputElement = element; }; } componentDidMount() { if (this.inputElement) { this.inputElement.focus(); } } render() { return <input ref={this.setInputRef} type="text" />; } }3.3 类组件中Ref的传递与层级访问
在类组件中, 如果父组件需要访问子组件内部的DOM节点, 操作步骤如下:
- 父组件创建ref对象并传递给子组件的ref属性。
- 子组件如果是类组件, 父组件获取的ref将指向子组件实例。
- 父组件通过ref.current调用子组件暴露的方法, 间接操作子组件内部的DOM。
代码示例如下:
import React, { Component } from 'react'; class ChildInput extends Component { constructor(props) { super(props); this.state = { value: '' }; } focus = () => { this.input.focus(); } render() { return <input ref={el => this.input = el} type="text" />; } } class ParentForm extends Component { constructor(props) { super(props); this.childRef = React.createRef(); } handleClick = () => { this.childRef.current.focus(); } render() { return ( <div> <ChildInput ref={this.childRef} /> <button onClick={this.handleClick}>调用子组件方法</button> </div> ); } }