ReactJS - scryRenderedDOMComponentsWithTag() 函数

---

---

scryRenderedDOMComponentsWithTag() 函数是 React 编程工具，用于查找和收集有关网页特定元素的信息。它只是计算机程序员搜索网站上特定项目的的一种方法。此 scryRenderedDOMComponentsWithTag() 函数搜索具有特定标签名称的项目，例如按钮、图像或段落。

因此，当我们使用 scryRenderedDOMComponentsWithTag(tree, tagName) 时，我们是在指示系统在“tree”中搜索任何具有给定“tagName”的项目。

假设我们有一个大型的复杂网页，并且想要查找其中的所有按钮。我们可以使用 scryRenderedDOMComponentsWithTag() 来处理所有工作，而不是手动搜索。

语法

scryRenderedDOMComponentsWithTag(
   tree,
   tagName
)

参数

该函数考虑了两个重要方面：tree 和 tagName。

• tree − tree 就像网页的地图，显示了所有不同的部分以及它们如何连接。

• tagName − tagName 只是我们感兴趣的元素类型的名称，例如 div 或 p。

返回值

scryRenderedDOMComponentsWithTag() 函数返回渲染树中所有与指定标签名称匹配的 DOM（文档对象模型）元素的列表。

以下是一些使用 scryRenderedDOMComponentsWithTag() 方法的简单 React 应用，以及每个应用的简要说明 -

示例

示例 - 按钮计数器应用

此应用显示一个按钮和一个计数。因此，当我们单击按钮时，它将递增计数。为了在 React 中测试 scryRenderedDOMComponentsWithTag()，我们通常会使用 Jest 或 React Testing Library 等测试库。因此，以下是应用和测试的代码 -

ButtonCounter.js

import React, { useState } from 'react';
import './App.css';
const ButtonCounter = () => {
   const [count, setCount] = useState(0);
   
   return (
      <div className='App'>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
   );
};

export default ButtonCounter;

按钮计数器应用的测试代码

import React from 'react';
import { render, scryRenderedDOMComponentsWithTag } from '@testing-library/react';
import ButtonCounter from './ButtonCounter';

test('renders ButtonCounter component', () => {
   const { container } = render(<ButtonCounter />);
   const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
   expect(buttons.length).toBe(1);
});

输出

示例 - 待办事项列表应用

该应用程序允许我们创建和显示待办事项列表。我们可以通过在文本框中输入待办事项并单击“添加待办事项”按钮来将新的待办事项添加到列表中。因此，以下是 React 应用的代码，以及我们创建的特定应用的测试 -

TodoList.js

import React, { useState } from 'react';
import './App.css'

const TodoList = () => {
   const [todos, setTodos] = useState([]);
   const [newTodo, setNewTodo] = useState('');
   const addTodo = () => {
      setTodos([...todos, newTodo]);
      setNewTodo('');
   };
   
   return (
      <div className='App'>
         <ul>
            {todos.map((todo, index) => (
               <li key={index}>{todo}</li>
            ))}
         </ul>
         <input
            type="text"
            value={newTodo}
            onChange={(e) => setNewTodo(e.target.value)}
         />
         <button onClick={addTodo}>Add Todo</button>
      </div>
   );
};

export default TodoList;

待办事项列表应用的测试代码

import React from 'react';
import { render, scryRenderedDOMComponentsWithTag } from '@testing-library/react';
import TodoList from './TodoList';

test('renders TodoList component', () => {
   const { container } = render(<TodoList />);
   const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
   const input = scryRenderedDOMComponentsWithTag(container, 'input');
   expect(buttons.length).toBe(1);
   expect(input.length).toBe(1);
});

输出

示例 - 颜色选择器应用

此应用允许我们从三个选项中选择颜色：红色、绿色和蓝色。所选颜色显示在按钮下方。因此，应用及其测试的代码如下所示 -

ColorPicker.js

import React, { useState } from 'react';

const ColorPicker = () => {
   const [selectedColor, setSelectedColor] = useState('');   
   const handleColorChange = (color) => {
      setSelectedColor(color);
   };
   
   return (
      <div>
         <p>Selected Color: {selectedColor}</p>
         <button onClick={() => handleColorChange('Red')}>Red</button>
         <button onClick={() => handleColorChange('Green')}>Green</button>
         <button onClick={() => handleColorChange('Blue')}>Blue</button>
      </div>
   );
};

export default ColorPicker;

颜色选择器应用的测试代码

import React from 'react';
import { render, scryRenderedDOMComponentsWithTag } from '@testing-library/react';
import ColorPicker from './ColorPicker';

test('renders ColorPicker component', () => {
   const { container } = render(<ColorPicker />);
   const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
   const paragraphs = scryRenderedDOMComponentsWithTag(container, 'p');
   expect(buttons.length).toBe(3);
   expect(paragraphs.length).toBe(1);
});

输出

上面每个测试用例的描述

• 在上面的测试用例中 -

• 为了渲染每个组件，我们使用 React Testing Library 中的 render 函数。

• 然后使用 scryRenderedDOMComponentsWithTag 来查找渲染组件中具有某些 HTML 标签的项目。

• 最后，进行断言以确认具有给定标签的元素数量是否符合预期。

• 安装必要的测试库（@testing-library/react 和 @testing-library/jest-dom） -

npm install --save-dev @testing-library/react @testing-library/jest-dom

总结

scryRenderedDOMComponentsWithTag() 函数是 React Testing Library 中使用的一种方法，用于在渲染的 React 组件中查找和检索 DOM 元素。此函数采用两个参数：渲染的组件（容器）和我们要搜索的 HTML 标签名称。