react中如何获取真实的dom

在 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 操作。