ReactJS - findRenderedDOMComponentWithTag()

---

---

在React中，有一個很有用的函式叫做findRenderedDOMComponentWithTag()。這個函式就像一個特殊的偵探，在我們應用的虛擬世界中搜索名為“標籤”的特定元件。

當我們使用findRenderedDOMComponentWithTag()時，我們是在告訴我們的計算機程式在應用程式的虛擬表示（稱為DOM（文件物件模型））中找到一個特定的標籤。

該函式檢查該確切的標籤。最有趣的部分是它期望找到完全匹配項。如果有多個或沒有匹配項，它將丟擲異常。

語法

findRenderedDOMComponentWithTag(
   tree,
   tagName
)

引數

tree − 它充當我們虛擬環境的地圖，顯示所有元素以及它們之間的關聯方式。

tagName − 這是我們在虛擬環境中查詢的標籤的名稱。

返回值

findRenderedDOMComponentWithTag()函式給出一個單一的結果。當我們使用此函式時，我們是在告訴我們的計算機程式在我們的應用程式的DOM中找到一個特定的HTML標籤（如<div>，<span>等）。該方法期望只識別一個與提供的標籤匹配的項。如果它檢測到多個或沒有匹配項，它將丟擲異常，表明某些內容不符合預期。

示例

示例 - 查詢標題

假設我們有一本虛擬書，我們想找到標題，它是一個標題（h1）標籤。為此，我們將使用findRenderedDOMComponentWithTag(tree, 'h1')。以下是此應用程式的程式碼：

// Import required libraries
import React from 'react';
import { render } from '@testing-library/react';
import { findRenderedDOMComponentWithTag } from 'testing-library';

// App component
const App = () => {
   return (
      <div>
         <h1>Title of the Book</h1>
      </div>
   );
};

// Test case
const { container } = render(<App1 />);
const headingElement = findRenderedDOMComponentWithTag(container, 'h1');
console.log(headingElement.textContent); 

輸出

Title of the Book

該程式的目標是使用findRenderedDOMComponentWithTag()函式查詢並顯示該標題。當我們要求應用程式找到標題（h1標籤）時，它應該返回短語“書名”。

示例 - 定位按鈕

讓我們假設在這個應用程式中我們有一堆按鈕。要查詢並與特定按鈕進行互動，請使用findRenderedDOMComponentWithTag(tree, 'button')。

// Import necessary libraries
import React from 'react';
import { render } from '@testing-library/react';
import { findRenderedDOMComponentWithTag } from 'testing-library';

// App component
const App = () => {
   return (
      <div>
         <button onClick={() => console.log('Button 1 is clicked')}>Button 1</button>
         <button onClick={() => console.log('Button 2 is clicked')}>Button 2</button>
      </div>
   );
};

// Test case
const { container } = render(<App />);
const buttonElement = findRenderedDOMComponentWithTag(container, 'button');
buttonElement.click(); 

輸出

Button 1 is clicked

程式中有兩個按鈕，一個標記為“按鈕1”，另一個標記為“按鈕2”。這裡的目標是使用findRenderedDOMComponentWithTag()函式查詢並與這些按鈕進行互動。當我們按下按鈕時，它應該顯示一條訊息，例如“已點選按鈕1”。

示例3

讓我們建立一個應用程式，其中我們有一些影像。要找到特定影像，我們將使用findRenderedDOMComponentWithTag(tree, 'img')。

// Import required libraries
import React from 'react';
import { render } from '@testing-library/react';
import { findRenderedDOMComponentWithTag } from 'testing-library';

// App component
const App = () => {
   return (
      <div>
         <img src="image1.jpg" alt="This is Image 1" />
         <img src="image2.jpg" alt="This is Image 2" />
      </div>
   );
};

// Test case
const { container } = render(<App />);
const imageElement = findRenderedDOMComponentWithTag(container, 'img');
console.log(imageElement.getAttribute('alt')); 

輸出

This is Image 1

在這個應用程式中，有兩張照片，每張照片顯示不同的內容。目標是使用findRenderedDOMComponentWithTag()函式識別並顯示有關這些影像的資訊。例如，當我們找到一張圖片時，它應該告訴我們它是什麼。如果它是第一張圖片，它可以說類似於“這是圖片1”。

總結

findRenderedDOMComponentWithTag()方法充當數字瀏覽器，幫助我們在應用程式的虛擬環境中找到特定專案。它確保我們得到我們想要的東西。因此，此功能使我們的編碼體驗更加輕鬆。記住要小心使用它，並期望它只找到一件東西。如果有多於或少於一件，它會通知我們。