快捷導(dǎo)航

詳解React中如何獲取真實(shí)的dom

更新時(shí)間：2025年02月13日 10:08:56 作者：逆襲的菜鳥(niǎo)X

這篇文章主要為大家詳細(xì)介紹了React中獲取真實(shí)的dom的相關(guān)方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1. 函數(shù)組件中的 useRef

在函數(shù)組件中，獲取 DOM 元素的引用需要使用 useRef 鉤子。

示例：函數(shù)組件中的 useRef 用法

import React, { useRef } from 'react';

function MyComponent() {
  // 創(chuàng)建一個(gè) ref 來(lái)引用 DOM 元素
  const inputRef = useRef(null);

  const focusInput = () => {
    // 通過(guò) ref 訪問(wèn)真實(shí)的 DOM 元素，并給它添加焦點(diǎn)
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default MyComponent;

解釋：

useRef 返回一個(gè)包含 .current 屬性的對(duì)象，current 可以指向真實(shí)的 DOM 元素（或者組件實(shí)例，具體取決于 ref 的用途）。

在這個(gè)例子中，inputRef.current 會(huì)指向 <input> 元素本身，你可以通過(guò)它訪問(wèn) DOM 元素的屬性和方法（例如 focus()）。

2. 類組件中的 createRef

在類組件中，獲取 DOM 元素的引用需要使用 React.createRef() 方法。

示例：類組件中的 createRef 用法

import React, { Component } from 'react';

class MyComponent extends Component {
  // 在類組件中創(chuàng)建 ref
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    // 通過(guò) ref 訪問(wèn)真實(shí)的 DOM 元素，并給它添加焦點(diǎn)
    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() 用于在類組件中創(chuàng)建一個(gè) ref 對(duì)象，this.inputRef.current 指向 DOM 元素（在此例中是 <input> 元素）。

focusInput 方法通過(guò) this.inputRef.current.focus() 調(diào)用 DOM 方法來(lái)聚焦輸入框。

3. 訪問(wèn) DOM 元素的常見(jiàn)用途

獲取輸入框的值：你可以通過(guò) ref 獲取到輸入框的值，雖然在大多數(shù)情況下，React 推薦使用受控組件來(lái)管理輸入框的值，但有時(shí)直接訪問(wèn) DOM 元素可能更簡(jiǎn)單。

示例：

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>
  );
}

控制焦點(diǎn)：ref 可以用來(lái)控制元素的焦點(diǎn)（如前面的例子），讓用戶能夠交互時(shí)快速導(dǎo)航到特定的輸入框。

DOM 操作：你還可以直接操作 DOM 元素的其他屬性，如添加事件監(jiān)聽(tīng)器、獲取元素尺寸、滾動(dòng)等。

4. 使用 ref 獲取自定義組件的實(shí)例

除了 DOM 元素，ref 還可以用來(lái)獲取類組件的實(shí)例。

示例：獲取類組件實(shí)例

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(); // 調(diào)用子組件的方法
  };

  render() {
    return (
      <div>
        <MyButton ref={this.buttonRef} />
        <button onClick={this.triggerButtonClick}>Trigger Child Button Click</button>
      </div>
    );
  }
}

export default ParentComponent;

解釋：

this.buttonRef.current 會(huì)指向子組件 MyButton 的實(shí)例，因此你可以直接調(diào)用它的方法（如 clickHandler()）。

ref 對(duì)于類組件和函數(shù)組件的使用方式略有不同，但它們的核心思想相同：通過(guò) ref 獲取實(shí)例或 DOM 元素的引用。

5. 注意事項(xiàng)

避免過(guò)度使用 ref：在 React 中，ref 是一種“逃逸機(jī)制”，它繞過(guò)了 React 的數(shù)據(jù)流和狀態(tài)管理。盡量避免在沒(méi)有必要的情況下使用 ref，推薦使用 React 的狀態(tài)和 props 來(lái)管理數(shù)據(jù)和交互。

ref 只在渲染完成后有效：ref 只能在組件渲染完成后訪問(wèn)到 DOM 元素。因此，在 componentDidMount 或 useEffect 中使用 ref 時(shí)，要確保渲染已經(jīng)完成。