ReactJS - testInstance.type 屬性

React JS 庫的核心思想是將程式劃分成許多元件。每個元件都有其獨特生命週期。React 提供了一些內建方法，我們可以在元件生命週期的不同階段重寫這些方法。

因此，在本教程中，我們將學習如何使用 testInstance.type 屬性。此屬性用於獲取與測試例項相關的元件型別。

語法

testInstance.type

讓我們透過一個示例來了解此屬性。當開發者在程式碼中使用 testInstance.type 時，他們是在請求計算機告訴他們正在處理哪種型別的元件。這對於確保軟體易於使用並按預期執行非常重要。

例如，類似於 button.type 的程式碼片段表明開發者想要了解程式中按鈕的型別。然後，計算機將返回類似“Button”的內容，幫助開發者更好地理解和管理他們的程式碼。

返回值

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 屬性建立了三個不同的示例。透過練習這些示例，我們可以理解它的實際應用。