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()方法充当数字浏览器，帮助我们在应用程序的虚拟环境中找到特定项目。它确保我们得到我们想要的东西。因此，此功能使我们的编码体验更加轻松。记住要小心使用它，并期望它只找到一件东西。如果有多于或少于一件，它会通知我们。