当前位置：首页 > article >正文

react中如何获取真实的dom

article 2025/2/14 1:22:13

在 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 {
  // 在类组件中创建 ref
  constructor(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 时，要确保渲染已经完成。