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

输出

此程序的目标是使用 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();	

输出

程序中有两个按钮，一个标记为“按钮 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'));	

输出

在此应用程序中，有两张照片，每张照片都显示不同的东西。目的是使用 findRenderedDOMComponentWithTag（） 函数识别和显示有关这些图像的信息。例如，当我们找到一张图片时，它应该告诉我们它是什么。如果它是第一个图像，它可以说“这是图像 1”。

总结

findRenderedDOMComponentWithTag（） 方法充当数字浏览器，帮助我们在应用的虚拟环境中定位特定项目。它确保我们得到我们想要的。因此，此功能使我们的编码体验变得简单。记住要小心使用它，并期望它只找到一件事。如果有更多或更少，它会通知我们。