免费企业建站系统源码竞价推广工作内容
在 React 中，获取真实的 DOM 元素通常通过 ref 来实现。ref 是一个特殊的属性，用于引用组件或 DOM 元素的实例。你可以通过 ref 获取到组件的真实 DOM 元素或组件实例。
1. 函数组件中的 useRef
在函数组件中，获取 DOM 元素的引用需要使用 useRef 钩子。
示例：函数组件中的 useRef 用法
import React, { useRef } from 'react';function MyComponent() {// 创建一个 ref 来引用 DOM 元素const inputRef = useRef(null);const focusInput = () => {// 通过 ref 访问真实的 DOM 元素，并给它添加焦点inputRef.current.focus();};return (<div><input ref={inputRef} type="text" /><button onClick={focusInput}>Focus the input</button></div>);
}export default MyComponent;
解释：
useRef返回一个包含.current属性的对象，current可以指向真实的 DOM 元素（或者组件实例，具体取决于ref的用途）。- 在这个例子中，
inputRef.current会指向<input>元素本身，你可以通过它访问 DOM 元素的属性和方法（例如focus()）。
2. 类组件中的 createRef
在类组件中，获取 DOM 元素的引用需要使用 React.createRef() 方法。
示例：类组件中的 createRef 用法
import React, { Component } from 'react';class MyComponent extends Component {// 在类组件中创建 refconstructor(props) {super(props);this.inputRef = React.createRef();}focusInput = () => {// 通过 ref 访问真实的 DOM 元素，并给它添加焦点this.inputRef.current.focus();};render() {return (<div><input ref={this.inputRef} type="text" /><button onClick={this.focusInput}>Focus the input</button></div>);}
}export default MyComponent;
解释：
React.createRef()用于在类组件中创建一个ref对象，this.inputRef.current指向 DOM 元素（在此例中是<input>元素）。focusInput方法通过this.inputRef.current.focus()调用 DOM 方法来聚焦输入框。
3. 访问 DOM 元素的常见用途
-
获取输入框的值：你可以通过
ref获取到输入框的值，虽然在大多数情况下，React 推荐使用受控组件来管理输入框的值，但有时直接访问 DOM 元素可能更简单。示例：
function MyComponent() {const inputRef = useRef(null);const handleSubmit = () => {alert(`Input value: ${inputRef.current.value}`);};return (<div><input ref={inputRef} type="text" /><button onClick={handleSubmit}>Submit</button></div>); } -
控制焦点：
ref可以用来控制元素的焦点（如前面的例子），让用户能够交互时快速导航到特定的输入框。 -
DOM 操作：你还可以直接操作 DOM 元素的其他属性，如添加事件监听器、获取元素尺寸、滚动等。
4. 使用 ref 获取自定义组件的实例
除了 DOM 元素，ref 还可以用来获取类组件的实例。
示例：获取类组件实例
import React, { Component } from 'react';class MyButton extends Component {clickHandler() {alert('Button clicked!');}render() {return <button onClick={this.clickHandler}>Click Me</button>;}
}class ParentComponent extends Component {constructor(props) {super(props);this.buttonRef = React.createRef();}triggerButtonClick = () => {this.buttonRef.current.clickHandler(); // 调用子组件的方法};render() {return (<div><MyButton ref={this.buttonRef} /><button onClick={this.triggerButtonClick}>Trigger Child Button Click</button></div>);}
}export default ParentComponent;
解释：
this.buttonRef.current会指向子组件MyButton的实例，因此你可以直接调用它的方法（如clickHandler()）。ref对于类组件和函数组件的使用方式略有不同，但它们的核心思想相同：通过ref获取实例或 DOM 元素的引用。
5. 注意事项
- 避免过度使用
ref：在 React 中，ref是一种“逃逸机制”，它绕过了 React 的数据流和状态管理。尽量避免在没有必要的情况下使用ref，推荐使用 React 的状态和 props 来管理数据和交互。 ref只在渲染完成后有效：ref只能在组件渲染完成后访问到 DOM 元素。因此，在componentDidMount或useEffect中使用ref时，要确保渲染已经完成。
总结：
- 在 函数组件 中，使用
useRef来获取真实的 DOM 元素。 - 在 类组件 中，使用
React.createRef()来获取真实的 DOM 元素。 ref用于访问 DOM 元素或组件实例，可以用于获取值、控制焦点或执行其他 DOM 操作。