快捷導(dǎo)航

React獲取組件對應(yīng)的DOM元素多種實現(xiàn)方法

更新時間：2025年02月27日 09:24:10 作者：秦JaccLink

本文主要介紹了React中獲取組件對應(yīng)DOM元素的多種方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

React 是一個強大的 JavaScript 庫，用于構(gòu)建用戶界面。在 React 中，組件是構(gòu)建 UI 的基本單位，而組件的渲染最終會產(chǎn)生相應(yīng)的 DOM 元素。有時，開發(fā)者需要獲取組件對應(yīng)的 DOM 元素以便進行直接操作，比如添加事件監(jiān)聽、獲取元素的尺寸、滾動位置等。在本文中，我們將深入探討在 React 中獲取組件對應(yīng)的 DOM 元素的多種方法，包括使用 refs、回調(diào) refs、以及如何處理函數(shù)組件中的 DOM 元素。

1. 理解 React 中的 DOM

在 React 中，組件的渲染結(jié)果是一個虛擬 DOM（Virtual DOM），這是 React 提高性能的關(guān)鍵所在。當(dāng)組件的狀態(tài)或?qū)傩愿淖儠r，React 會創(chuàng)建一個新的虛擬 DOM，并與之前的虛擬 DOM 進行比較，然后將發(fā)生變化的部分更新到實際的 DOM 中。

盡管 React 鼓勵使用其聲明式 API 來構(gòu)建 UI，但在某些情況下，直接操作 DOM 是必要的。這時，我們需要獲取組件對應(yīng)的實際 DOM 元素。

2. 使用 Refs

React 提供了一種方法來引用組件對應(yīng)的 DOM 元素，這就是 refs。Refs 是一種方式，讓我們能夠直接訪問 DOM 元素或類組件的實例。以下是如何使用 refs 的詳細說明。

2.1 創(chuàng)建 Ref

在類組件中，使用 React.createRef() 來創(chuàng)建一個 ref。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); // 創(chuàng)建一個 ref
  }

  componentDidMount() {
    // 訪問 DOM 元素
    console.log(this.myRef.current); // 輸出對應(yīng)的 DOM 元素
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>; // 將 ref 賦給 DOM 元素
  }
}

export default MyComponent;

在上面的示例中，myRef 被創(chuàng)建并賦給了組件中的 div 元素。隨后在 componentDidMount 生命周期方法中，我們可以通過 this.myRef.current 訪問到對應(yīng)的 DOM 元素。

2.2 函數(shù)組件中的 Refs

在函數(shù)組件中，可以使用 useRef 鉤子來創(chuàng)建 refs。useRef 允許我們在函數(shù)組件中保持對 DOM 元素的引用。

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const myRef = useRef(null); // 創(chuàng)建一個 ref

  useEffect(() => {
    console.log(myRef.current); // 輸出對應(yīng)的 DOM 元素
  }, []);

  return <div ref={myRef}>Hello, World!</div>; // 將 ref 賦給 DOM 元素
};

export default MyComponent;

在這里，myRef 是用 useRef 創(chuàng)建的，myRef.current 在 useEffect 鉤子中能夠訪問到真實的 DOM 元素。

3. 回調(diào) Refs

除了使用 createRef 和 useRef，React 還允許使用回調(diào) refs。這種方法在需要使用動態(tài) refs 的情況下非常有用。

3.1 使用回調(diào) Refs

回調(diào) refs 是一個函數(shù)，該函數(shù)接收 DOM 元素作為參數(shù)，并可以在組件的生命周期中動態(tài)更新。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = null; // 初始化 ref
  }

  setRef = (element) => {
    this.myRef = element; // 將 DOM 元素賦值給 myRef
  };

  componentDidMount() {
    console.log(this.myRef); // 輸出對應(yīng)的 DOM 元素
  }

  render() {
    return <div ref={this.setRef}>Hello, World!</div>; // 使用回調(diào) ref
  }
}

export default MyComponent;

在這個例子中，setRef 函數(shù)被用作回調(diào)，當(dāng) DOM 元素被創(chuàng)建時，setRef 會被調(diào)用，并將元素賦值給 this.myRef。

3.2 函數(shù)組件中的回調(diào) Refs

在函數(shù)組件中，同樣可以使用回調(diào) refs。如下所示：

import React, { useEffect } from 'react';

const MyComponent = () => {
  let myRef = null; // 初始化 ref

  const setRef = (element) => {
    myRef = element; // 將 DOM 元素賦值給 myRef
  };

  useEffect(() => {
    console.log(myRef); // 輸出對應(yīng)的 DOM 元素
  }, []);

  return <div ref={setRef}>Hello, World!</div>; // 使用回調(diào) ref
};

export default MyComponent;

在這個例子中，setRef 被用作回調(diào)，當(dāng) div 被渲染時，myRef 將持有對應(yīng)的 DOM 元素引用。

4. 獲取多個 DOM 元素

在某些情況下，可能需要獲取多個 DOM 元素。例如，當(dāng)渲染列表時，使用 refs 可以單獨訪問每個元素。

4.1 使用數(shù)組的 refs

在類組件中，可以將 refs 存儲為數(shù)組：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.itemsRef = []; // 初始化一個空數(shù)組
  }

  addRef = (element) => {
    if (element && !this.itemsRef.includes(element)) {
      this.itemsRef.push(element); // 將 DOM 元素添加到數(shù)組中
    }
  };

  componentDidMount() {
    console.log(this.itemsRef); // 輸出所有對應(yīng)的 DOM 元素
  }

  render() {
    return (
      <div>
        {['Item 1', 'Item 2', 'Item 3'].map((item, index) => (
          <div key={index} ref={this.addRef}>
            {item}
          </div>
        ))}
      </div>
    );
  }
}

export default MyComponent;

在這個示例中，itemsRef 數(shù)組存儲了所有渲染的 div 元素。

4.2 使用 useRef 和 Map

在函數(shù)組件中，使用 useRef 和 Map 可以實現(xiàn)相同的效果：

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const itemsRef = useRef(new Map()); // 創(chuàng)建一個 Map

  const setRef = (element, index) => {
    if (element) {
      itemsRef.current.set(index, element); // 將 DOM 元素存入 Map
    }
  };

  useEffect(() => {
    console.log(itemsRef.current); // 輸出所有對應(yīng)的 DOM 元素
  }, []);

  return (
    <div>
      {['Item 1', 'Item 2', 'Item 3'].map((item, index) => (
        <div key={index} ref={(el) => setRef(el, index)}>
          {item}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

在這里，itemsRef 是一個 Map，能夠存儲每個 DOM 元素的索引映射。

5. 直接操作 DOM 元素的注意事項

雖然在 React 中可以直接訪問和操作 DOM 元素，但應(yīng)該盡量避免這樣做。React 是一個聲明式庫，直接操作 DOM 可能會導(dǎo)致與 React 的狀態(tài)管理產(chǎn)生沖突。

5.1 保持組件的聲明性

在 React 中，通常應(yīng)該通過狀態(tài)和屬性來控制 UI，而不是直接操作 DOM。當(dāng)需要更改組件的外觀或行為時，應(yīng)更新與之相關(guān)的狀態(tài)或?qū)傩浴?/p>

5.2 使用 refs 的場合

在某些情況下，使用 refs 是合適的，比如：

需要與第三方庫集成。
需要直接控制焦點、文本選擇或媒體播放。
需要在動畫中使用底層 DOM API。

5.3 避免不必要的重渲染

當(dāng)使用 refs 操作 DOM 時，確保避免不必要的重渲染。如果你在 render() 方法中直接修改 DOM，而不是通過 React 的狀態(tài)更新，可能會導(dǎo)致 React 的虛擬 DOM 與實際 DOM 之間的不同步。

6. 實際應(yīng)用示例

下面是一個更加完整的示例，演示如何在真實應(yīng)用中使用 refs 來獲取 DOM 元素。

6.1 創(chuàng)建一個簡單的輸入框組件

我們將創(chuàng)建一個輸入框組件，其中包含一個按鈕，單擊按鈕時，輸入框?qū)@得焦點。

import React, { useRef } from 'react';

const InputComponent = () => {
  const inputRef = useRef(null); // 創(chuàng)建一個 ref

  const focusInput = () => {
    inputRef.current.focus(); // 使輸入框獲得焦點
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="輸入一些文本..." />
      <button onClick={focusInput}>聚焦輸入框</button>
    </div>
  );
};

export default InputComponent;

在這個示例中，當(dāng)用戶單擊“聚焦輸入框”按鈕時，輸入框會獲得焦點。這是通過 refs 實現(xiàn)的，inputRef.current.focus() 直接調(diào)用了 DOM 的 focus() 方法。