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
