ReactJS - testInstance.type 属性

React JS 库就是将程序划分为许多组件。每个组件都有唯一的生命周期。React 提供了一些内置的方法，我们可以在组件生命周期的各个点覆盖这些方法。

因此，在本教程中，我们将学习如何使用 testInstance.type 属性。此属性用于获取与测试实例相关的组件类型。

语法

testInstance.type

让我们通过一个例子来理解这个属性。当开发人员在他们的代码中使用 testInstance.type 时，他们要求计算机告诉他们他们正在处理什么样的部分。这对于确保软件轻松运行并按预期执行非常重要。

例如，像 button.type 这样的代码项表明开发人员想知道他们的程序中按钮的类型。然后，计算机将用类似“按钮”的东西来回答，帮助开发人员更好地理解和管理他们的代码。

返回值

testInstance.type 返回计算机程序组件的类型或种类。简单来说，它为开发人员提供了有关应用程序元素的信息。

例子

示例 - DivTypeApp

在这个应用程序中，我们将使用 TestRenderer 创建一个简单的 React 组件（一个 <div> 元素），并将其类型记录到控制台。JSX 返回值是一个基本的段落元素，显示 testRenderer.type 属性的示例。请参阅下面的此应用程序的代码 -

import React from 'react';
import TestRenderer from 'react-test-renderer';

// Defining our DivTypeApp Component
const DivTypeApp = () => {

	 	// Function to demonstrate TestRenderer.type Property
	 	function testFunction() {
	 	 	 const renderer = TestRenderer.create(
	 	 	 	 	<div>The testRenderer.type Property</div>
	 	 	 );
	 	 	 const mytype = renderer.root;
	 	 	 console.log(mytype.type);
	 	}
	 	
	 	testFunction();
	 	
	 	// Returning our JSX code
	 	return <>
	 	 	 <p>
	 	 	 	 	The testRenderer.type Property Example
	 	 	 </p> 		
	 	</>;
}

export default DivTypeApp;

输出

示例 - ButtonTypeApp

在这个应用程序中，我们将使用 TestRenderer 创建一个 React 组件（一个按钮元素），然后将其类型记录到控制台。JSX 返回值是一个简单的段落元素，显示 testRenderer.type 属性的示例。因此，下面的代码如下 -

import React from 'react';
import TestRenderer from 'react-test-renderer';

const ButtonTypeApp = () => {
	 	function testButtonType() {
	 	 	 const renderer = TestRenderer.create(
	 	 	 	 	<button>Click me</button>
	 	 	 );
	 	 	 const buttonType = renderer.root;
	 	 	 console.log(buttonType.type);
	 	}
	 	
	 	testButtonType();
	 	
	 	return (
	 	 	 <>
	 	 	 	 	<p>ButtonTypeApp: Testing testInstance.type with a button.</p>
	 	 	 </>
	 	);
};

export default ButtonTypeApp;

输出

示例 - HeadingTypeApp

在这个应用程序中，我们将使用 TestRenderer 创建一个 React 组件（一个 <h1> 标题），将其类型记录到控制台（在本例中为“h1”），并返回一个带有解释性段落的 JSX 结构。这是使用标题元素测试 testInstance.type 属性的基本示例。这是这个应用程序的代码 -

import React from 'react';
import TestRenderer from 'react-test-renderer';

const HeadingTypeApp = () => {
	 	function testHeadingType() {
	 	 	 const renderer = TestRenderer.create(
	 	 	 	 	<h1>Hello, TestInstance!</h1>
	 	 	 );
	 	 	 const headingType = renderer.root;
	 	 	 console.log(headingType.type); // Output: "h1"
	 	}
	 	
	 	testHeadingType();
	 	
	 	return (
	 	 	 <>
	 	 	 	 	<p>HeadingTypeApp: Testing testInstance.type with a heading.</p>
	 	 	 </>
	 	);
};

export default HeadingTypeApp;

输出

总结

testInstance.type 类似于在计算机程序中的不同拼图上放置名称标签。它可以帮助开发人员了解和组织他们的代码，使计算机更容易理解每个组件应该执行什么。正如我们使用 testInstance.type 属性创建了三个不同的示例。通过练习这些示例，我们可以理解它的实际用途。