ReactJS - scryRenderedDOMComponentsWithTag()

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

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

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

语法

scryRenderedDOMComponentsWithTag(
   tree,
   tagName
)

参数

该函数考虑了两个重要因素:树和标签名称。

• 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 App 的代码以及我们创建的特定应用的测试 −

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 标签名称。

reactjs_reference_api.html