ReactJS - isCompositeComponentWithType（）

---

---

正如我们所知，在 React 中，每个组件都有自己的生命周期，这意味着它们在我们的项目中运行时会经历不同的阶段。React 提供了用于控制这些进程的内置方法。

因此，现在让我们看一下 isCompositeComponentWithType（） 方法。这个方法告诉我们程序的给定元素是否是 React 组件。以下是我们如何使用它 -

语法

isCompositeComponentWithType(
	 	instance,
	 	componentClass
)

参数

在React中，isCompositeComponentWithType 方法需要两个参数 -

• instance − 此参数提供我们想要测试的组件实例。
• componentClass − React 组件类由此参数表示。

返回值

该函数将确定实例是否是此组件类的实例。该函数产生一个布尔结果 -

• 如果实例是类型与 componentClass 匹配的组件，则返回 true。
• 如果实例不是提供的 componentClass 的组件，则返回 false。

例子

示例 - 简单的应用程序

让我们创建一个带有组件的简单 React 应用程序，然后在测试中使用 isCompositeComponentWithType（）。我们将有一个简单的 React 组件（MyComponent）和一个测试代码。该测试使用 isCompositeComponentWithType（） 来检查呈现的组件是否为“div”类型的复合组件。此应用程序的代码如下 -

MyComponent.js

import React from 'react';
import { render } from '@testing-library/react';
import { isCompositeComponentWithType } from 'react-dom/test-utils';

const MyComponent = () => {
	 	return (
	 	 	 <div>
	 	 	 	 	<h1>Hello, I'm a simple component!</h1>
	 	 	 </div>
	 	);
};
export default MyComponent;
test('MyComponent is a composite component of type "div"', () => {
	 	const { container } = render(<MyComponent />);
	 	const isComposite = isCompositeComponentWithType(container.firstChild, 'div');
	 	expect(isComposite).toBe(true);
});

输出

示例 - 测试按钮应用程序

以下是包含 isCompositeComponentWithType（） 方法的 App.js 文件的完整代码，用于显示该方法的用法。

import React from 'react';
import { isCompositeComponentWithType } from 'react-dom/test-utils';

// Define App Component
const App = () => {

	 	// Function to show isCompositeComponentWithType()
	 	function myFunction() {
	 	 	 var a = isCompositeComponentWithType(el);
	 	 	 console.log("Is the following element a composite component? " + a);
	 	}
	 	
	 	// The element for testing
	 	const el = <div>
	 	 	 <h1>element</h1>
	 	</div>
	 	
	 	// Return the user interface
	 	return (
	 	 	 <div id='el'>
	 	 	 	 	<h1>React isCompositeComponentWithType() method usage</h1>
	 	 	 	 	<button onClick={myFunction}>
	 	 	 	 	Click Me !!
	 	 	 	 	</button>
	 	 	 </div>
	 	);
}

export default App;

输出

此代码显示了一个 App 组件，该组件具有函数 myFunction，用于显示 isCompositeComponentWithType（） 方法。当我们在应用程序中单击该按钮时，它将检查 el 元素是否为复合组件并记录结果。

假设我们正在创建一个数字店面，并想知道我们网站的特定部分是否是一种产品列表。我们可以通过调用 isCompositeComponentWithType（） 函数来实现这一点。首先，我们导入所需的工具，构建一个函数进行验证，创建一个元素（产品列表），然后通过测试按钮将其显示在我们的网站上。

示例 - 从API获取数据

现在，我们将有一个从 API 获取和显示数据的应用程序。还有测试文件，它使用 isCompositeComponentWithType（） 来测试 FetchData 组件是否呈现从 API 获取的数据。它使用 @testing-library/react 中的 render 函数来渲染组件，并使用 waitFor 等待异步获取调用完成。此应用程序的代码如下 -

// FetchData.js
import React, { useState, useEffect } from 'react';

const FetchData = () => {
	 	const [data, setData] = useState([]); 		
	 	useEffect(() => {
	 	 	 const fetchData = async () => {
	 	 	 try {
	 	 	 	 	const response = await fetch('https://jsonplaceholder.typicode.com/todos');
	 	 	 	 	const result = await response.json();
	 	 	 	 	setData(result);
	 	 	 } catch (error) {
	 	 	 	 	console.error('Error fetching data:', error);
	 	 	 }
	 	}; 		
	 	fetchData();
	 	}, []);
	 	
	 	return (
	 	 	 <div>
	 	 	 	 	<h1>Fetching Data from an API</h1>
	 	 	 	 	<ul>
	 	 	 	 	 	 {data.map(item => (
	 	 	 	 	 	 	 	<li key={item.id}>{item.title}</li>
	 	 	 	 	 	 ))}
	 	 	 	 	</ul>
	 	 	 </div>
	 	);
};

export default FetchData;

FetchData.test.js

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

// fetch function
global.fetch = jest.fn(() =>
Promise.resolve({
	 	json: () => Promise.resolve([{ id: 1, title: 'Sample Todo' }]),
})
);

test('FetchData renders data from API', async () => {
	 	const { getByText } = render(<FetchData />);
	 	
	 	// Wait for the fetch call
	 	await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
	 	
	 	const todoItem = getByText('Sample Todo');
	 	expect(todoItem).toBeInTheDocument();
});

输出

总结

isCompositeComponentWithType（） 是一个有用的工具，用于识别我们应用程序中的 React 组件类型，并在测试或调试情况下检查它们的有效性。我们创建了三个不同的应用程序来展示此功能的用法。